'data:font/woff.....' 글꼴 로드를 거부했습니다. 이는 "default-src 'self' 컨텐츠 보안 정책 지시문을 위반합니다.'font-src'는
브라우저 콘솔에서 내 react webApp이 이 오류를 표시함
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,
}
};
나에게 그것은 크롬 확장자 'Grammarly' 때문이었다.그것을 무효로 한 후, 에러는 발생하지 않았습니다.
이 특정 오류를 수정하려면 CSP에 다음이 포함되어야 합니다.
font-src 'self' data:;
따라서 index.html meta는 다음과 같습니다.
<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">
중요한 것은 Chrome 업데이트와 관련된 것으로 가정할 때 비슷한 문제가 있었습니다.
CDN을 사용하고 있었기 때문에 font-src를 추가하고 URL을 지정해야 했습니다.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">
개인적인 경험으로 볼 때, 추가 기능/확장 기능의 간섭을 제거하기 위해 Ingnito(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
}
나도 비슷한 문제에 직면해 있었다.
- 기본적으로 선택되는 모든 CSP 파라미터를 삭제하고 각 속성이 필요한 이유를 이해해야 합니다.
font-src - 그 후에 지정된 src에서 글꼴을 로드하도록 브라우저에 지시하는 것입니다.font-src: 'self' - 동일한 원본 또는 시스템 내에 글꼴 패밀리를 로드하도록 지시합니다.font-src: 'self' data: 같은 발신기지 내의 로드 폰트 패밀리와 데이터 취득을 위한 호출을 알립니다.
또한 경고 "** 다운로드된 글꼴을 디코딩하지 못했습니다. OTS 구문 분석 오류: 잘못된 버전 태그 **." 이 표시될 수 있습니다. CSP에 다음 항목을 추가하십시오.
font-src: 'self' 글꼴
이것으로 에러 없이 로딩됩니다.
CSP를 사용하면 신뢰할 수 있는 소스를 화이트리스트에 추가할 수 있습니다.다른 모든 소스에 대한 액세스는 허용되지 않습니다.이 Q&A를 주의 깊게 읽고 신뢰할 수 있는 경우 글꼴, 소켓 연결 및 기타 소스를 화이트리스트에 포함시키십시오.
이 알고 를 할 수 .meta테스트 태그, 아마 모든 것이 작동될 것입니다.에, 「 」 「 」 「 」 「 」 「 」를 유지하고 있습니다.meta★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
오늘 노드 어플리케이션에서도 같은 에러가 발생했습니다.
다음은 노드 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'로 변경한 후 문제가 해결되었습니다.
저도 비슷한 문제가 있었어요.angular.json에서 잘못된 출력 폴더 경로를 언급했습니다.
"outputPath": "dist/",
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
브라우저 확장 uBlock의 "Block remote fonts" 설정이 이 오류를 일으킵니다.(주의: 적어도 나에게는 문법이 문제가 되지 않았습니다.)
보통 이것은 문제가 되지 않습니다.원격 글꼴이 차단되면 다른 글꼴로 폴백하여 "ERR_BLOCKED_BY_CLIENT"라는 콘솔 경고가 표시됩니다.그러나 사이트에서 Font Awesome을 사용하면 아이콘이 상자로 표시되므로 심각한 문제가 될 수 있습니다.
이 문제를 해결하기 위해 웹사이트에서 할 수 있는 일은 많지 않습니다(단, 글꼴 기반 아이콘에 라벨을 붙이는 등의 방법으로 문제가 발생하는 것을 방지할 수 있습니다).CSP를 변경(또는 CSP를 추가)해도 CSP는 수정되지 않습니다.웹 사이트(CDN이 아닌)에서 글꼴을 제공해도 수정되지 않습니다.
반면 uBlock 사용자는 다음 중 하나를 수행하여 이 문제를 해결할 수 있습니다.
- 확장에 대한 대시보드의 옵션을 전역적으로 선택 취소합니다.
- 웹 사이트로 이동하여 확장 아이콘을 클릭한 다음, 'A' 아이콘을 클릭하여 해당 사이트의 글꼴만 차단하지 마십시오.
- 확장 대시보드의 화이트리스트에 추가하여 사이트에 대한 uBlock 사용 안 함
위험하므로 CSP(Content Security Policy)에서 금지한 인라인 스타일을 여러 곳에서 사용했을 수 있습니다.
인라인 스타일을 삭제하고 전용 스타일시트에 넣어보세요.
저도 같은 문제가 있었고, 이 문제를 해결했습니다../내 디렉토리 이름 앞에node.js앱, 즉
app.use(express.static('./public'));
다음은 npm 빌드 후 작성된 server.js 파일을 angular dist 폴더로 전송하기 위해 사용하는 코드의 일부입니다.
// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));
바꿔서 고쳤다."/dist/"로."./dist/"
저에겐 용감한 브라우저의 ipfs 확장 때문입니다.
프로젝트가 vue-cli인 경우npm run build변해야 한다
assetsPublicPath: '/'로.assetsPublicPath'./'
같은 문제가 발생했는데, 다음 파일이 아닌 파일 디렉토리에 오류가 있음이 판명되었습니다.
app.use(express.static(__dirname + '/../dist'));나는 다음을 가지고 있었다.
app.use(express.static('./dist'));저도 오늘 같은 문제에 직면했습니다.여기서 많은 답을 찾았죠.그러나 중요한 것은 이 오류 메시지가 상당히 모호하고 정확한 오류를 명시적으로 지적하지 않는다는 것입니다.
일부는 브라우저 확장자, 일부는 잘못된 URL 패턴으로 인해 발생했으며, 저는 이 화면의 팝업에서 사용된 form Group 인스턴스의 오류로 인해 발생하였습니다.따라서 코드를 새로 변경하기 전에 코드를 디버깅하고 오류가 없는지 확인하시기 바랍니다.디버깅을 하면 실제 이유를 알 수 있습니다.
그 밖에 아무것도 동작하지 않는 경우는, URL 를 확인해 주세요.이것은 이 문제의 가장 일반적인 이유입니다.
Larabel & 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');
프런트 엔드 애플리케이션을 다른 포트로 실행하는 것이 도움이 되었습니다.
처음에 저는ng serve --port 3000내가 나중에 바꾼 건ng serve --port 5000
report only라고 표시되어 있는 경우 콘텐츠정책 오류 실행을 거부한 것입니다.그러면 경고가 무시될 수 있으며 Cloudflare의 페이지 실드 기능으로 인해 발생할 수 있습니다.
제 경우 create-react-app 생성 앱에서 src/registerServiceWorker 파일을 삭제했습니다.추가했더니 다 되네.
언급URL : https://stackoverflow.com/questions/45366744/refused-to-load-the-font-datafont-woff-it-violates-the-following-content
'source' 카테고리의 다른 글
| 요소가 DOM에 있을 때까지 기다리는 연장기 (0) | 2023.03.15 |
|---|---|
| 맵과 결합을 사용하여 반응 구성요소를 렌더링하려면 어떻게 해야 합니까? (0) | 2023.03.15 |
| Wordpress에서 홈 페이지로 다시 연결 (0) | 2023.03.15 |
| Google이 JSON 응답 앞에 (1)을 추가하는 이유는 무엇입니까? (0) | 2023.03.15 |
| get_module은 플러그인에서 "구체 분류법"을 제공합니다. (0) | 2023.03.15 |