글꼴 'data : font / woff…'로드 거부는 다음 콘텐츠 보안 정책 지침을 위반합니다 :“default-src 'self'”. 'font-src'에 유의하십시오.

내 반응 웹 앱이 브라우저 콘솔 에서이 오류를 제공합니다.

Refused to load the font 'data:font/woff;base64,d09........' because it` 
`violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

또한:

Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

브라우저 콘솔의 스크린 샷

index.html을 이 가지고 메타 :

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

WebPack.cofig.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "./src"),
    devtool: debug ? "inline-sourcemap" : true,
    entry: "../src/index.js",

    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,  // a regular expression that catches .js files
                exclude: /node_modules/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|.jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2016', 'stage-0',],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, "src"),
            "node_modules",
        ]
    },
    output: {
        path: __dirname + "/public/",
        // publicPath: "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
    devServer: {
        port: 3000, // most common port
        contentBase: './public',
        inline: true,
        historyApiFallback: true,
    }
};

저에게는 Chrome 확장 프로그램 'Grammarly'때문이었습니다. 이를 비활성화 한 후 오류가 발생하지 않았습니다.

이 특정 오류를 수정하려면 CSP에 다음이 포함되어야합니다.

font-src 'self' data:;

따라서 index.html 메타는 다음과 같아야합니다.

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

가치있는 일-Chrome 업데이트와 관련이 있다고 가정하면 비슷한 문제가 발생했습니다.

font-src를 추가 한 다음 CDN을 사용하고 있었기 때문에 URL을 지정해야했습니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

개인적인 경험에서 사이트를 시크릿 (Chrome), Private Browsing (Firefox) 및 InPrivate (IE11 && Edge)에서 실행하여 애드온 / 확장 프로그램의 간섭을 제거하는 것이 항상 가장 좋은 첫 번째 단계입니다. 설정에서 명시 적으로 활성화 된 경우이 모드에서 테스트를 방해 할 수 있습니다. 그러나 문제 해결을위한 쉬운 첫 번째 단계입니다.

내가 여기에 온 이유는 Web of Trust (WoT)가 내 페이지에 콘텐츠를 추가하고 내 페이지가 매우 엄격한 콘텐츠 보안 정책을 가졌기 때문입니다.

Header set Content-Security-Policy "default-src 'none'; font-src 'self' data:; style-src 'self' 'unsafe-inline' data:; img-src 'self' data:; script-src 'self' 'unsafe-inline'; connect-src 'self';"

이로 인해 많은 오류가 발생했습니다. 나는 확장 프로그램 에이 사이트에서 프로그래밍 방식으로 실행하지 않도록 지시하는 방법에 대한 답변을 더 찾고있었습니다. 이렇게하면 사람들이 확장 프로그램을 사용하면 내 사이트에서 실행되지 않습니다. 이것이 가능하다면 광고 차단기는 오래 전에 사이트에서 금지되었을 것입니다. 그래서 내 연구는 약간 순진합니다. 이것이 다른 답변에서 언급 된 소수의 확장과 특별히 관련되지 않은 문제를 진단하려는 다른 사람에게 도움이되기를 바랍니다.

이것을 다음에 추가해야 할 수도 있습니다 webpack.config.js.

devServer: {

        historyApiFallback: true
    }
};

나는 또한 오늘 내 노드 응용 프로그램에서 동일한 오류에 직면했습니다.

아래는 내 노드 API입니다.

app.get('azureTable', (req, res) => {
  const tableSvc = azure.createTableService(config.azureTableAccountName, config.azureTableAccountKey);
  const query = new azure.TableQuery().top(1).where('PartitionKey eq ?', config.azureTablePartitionKey);
  tableSvc.queryEntities(config.azureTableName, query, null, (error, result, response) => {
    if (error) { return; }
    res.send(result);
    console.log(result)
  });
});

수정은 매우 간단했으며 API 앞에 슬래시 "/"가 누락되었습니다. 따라서 경로를 'azureTable'에서 '/ azureTable'로 변경 한 후 문제가 해결되었습니다.

CSP는 신뢰할 수있는 소스를 허용 목록에 추가하는 데 도움이됩니다. 다른 모든 소스는 액세스가 허용되지 않습니다. 이 Q & A를 주의 깊게 읽고 신뢰할 수있는 경우 글꼴, 소켓 연결 및 기타 소스를 허용 목록에 포함 해야합니다 .

수행중인 작업을 알고 있다면 meta테스트 할 태그를 주석 처리 할 수 ​​있습니다 . 아마도 모든 것이 작동 할 것입니다. 하지만 여기에서 귀하 / 귀하의 사용자가 보호되고 있으므로 meta태그를 유지 하는 것이 좋습니다.

비슷한 문제가있었습니다. angular.json에서 잘못된 출력 폴더 경로를 언급했습니다.

"outputPath": "dist/",

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

비슷한 문제에 직면했습니다.

1. 기본적으로 선택되는 모든 CSP 매개 변수를 제거하고 각 속성이 필요한 이유를 이해해야합니다.

font-src-그 뒤에 지정된 src에서 글꼴을로드하도록 브라우저에 지시합니다. font-src : 'self'-동일한 출처 또는 시스템 내에서 글꼴 패밀리를로드하도록 지시합니다. font-src : 'self'data :-동일한 출처 내에서 글꼴 패밀리를로드하고 데이터를 가져 오기위한 호출을 알려줍니다.

"** 다운로드 한 글꼴을 디코딩하지 못했습니다. OTS 구문 분석 오류 : 잘못된 버전 태그 **"경고가 표시 될 수도 있습니다. CSP에 다음 항목을 추가합니다.

font-src : 'self'글꼴

이제 오류없이로드됩니다.

CSP (Content Security Policy)가 위험 할 수 있기 때문에 금지하는 인라인 스타일을 여러 곳에서 사용했을 것입니다.

인라인 스타일을 제거하고 전용 스타일 시트에 넣으십시오.

나는 같은 문제가 있었고 ./내 node.js앱 의 디렉토리 이름 앞에 사용하여 해결되었습니다.

app.use(express.static('./public'));

나를 위해 그것은 용감한 브라우저의 ipfs 확장 때문이었습니다.

브라우저 확장 프로그램 uBlock의 "원격 글꼴 차단" 설정으로 인해이 오류가 발생합니다. (참고 : 적어도 저에게는 문법 문제가 아니 었습니다.)

일반적으로 이것은 문제가되지 않습니다. 원격 글꼴이 차단되면 다른 글꼴로 대체되고 "ERR_BLOCKED_BY_CLIENT"라는 콘솔 경고가 발생합니다. 그러나 사이트에서 Font Awesome을 사용하는 경우 아이콘이 상자로 표시되기 때문에 이는 심각한 문제가 될 수 있습니다.

이 문제를 해결하기 위해 웹 사이트에서 할 수있는 일이 많지 않습니다 (하지만 글꼴 기반 아이콘에 라벨을 지정하여 너무 나빠지는 것을 방지 할 수 있습니다). CSP를 변경 (또는 추가)해도 문제가 해결되지 않습니다. 웹 사이트 (CDN 아님)에서 글꼴을 제공해도 문제가 해결되지 않습니다.

반면에 uBlock 사용자는 다음 중 하나를 수행하여이 문제를 해결할 수 있습니다.

• 확장에 대한 대시 보드에서 전역 적으로 옵션을 선택 취소합니다.
• 웹 사이트로 이동하여 확장 아이콘을 클릭 한 다음 해당 사이트에 대한 글꼴을 차단하지 않으 려면 X 기호 'A'아이콘 을 클릭 하십시오.
• 확장 프로그램 대시 보드의 화이트리스트에 추가하여 사이트에 대한 uBlock을 비활성화하십시오.

프로젝트가 vue-cli이고 실행 npm run build하면 변경해야합니다.

assetsPublicPath: '/' 에 assetsPublicPath'./'

나는 같은 문제가 있었고 내가 제공하려는 파일의 디렉토리에 다음 대신 오류가 있음이 밝혀졌습니다.

app.use(express.static(__dirname + '/../dist'));

나는 가지고 있었다 :

app.use(express.static('./dist'));

나는 또한 내 실행 코드에서 오늘 같은 문제에 직면했습니다. 음, 여기에서 많은 답을 찾았습니다. 그러나 제가 언급하고 싶은 중요한 것은이 오류 메시지가 매우 모호하고 정확한 오류를 명시 적으로 지적하지 않는다는 것입니다.

일부는 브라우저 확장으로, 일부는 잘못된 URL 패턴으로 인해 직면했으며 해당 화면의 팝업에 사용 된 formGroup 인스턴스의 오류로 인해이 문제에 직면했습니다. 따라서 코드를 새로 변경하기 전에 코드를 디버그하고 그러한 오류가 없는지 확인하십시오. 디버깅을 통해 실제 이유를 확실히 찾을 수 있습니다.

아무것도 작동하지 않는 경우이 문제의 가장 일반적인 원인이므로 URL을 확인하십시오.

내 laravel & VueJS 프로젝트에서 webpack.mix.js 파일로이 오류를 해결했습니다. 포함

const mix = require('laravel-mix');

mix.webpackConfig({
   devServer: {
     proxy: {
       '*': 'http://localhost:8000'
     }
   },
   resolve: {
     alias: {
       "@": path.resolve(
         __dirname,
         "resources/assets/js"
       )
     }
   }
 });

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

다음은 내 server.js 파일을 npm 빌드 후 생성 된 angular dist 폴더 로 보내는 데 사용하는 코드의 일부입니다.

// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

변경 "/dist/"하여 수정했습니다. "./dist/"

제 경우에는 create-react-app 생성 앱에서 src / registerServiceWorker 파일을 삭제했습니다 . 나는 그것을 추가했고 이제는 모두 작동합니다.