Ionic 由于“内容安全策略”错误而导致的离子图标,

raogr8fs 于 2022-12-09 发布在 Ionic

关注(0)|答案(2)|浏览(217)

奇怪的事情每天都在发生。
突然，我得到这个错误，我的离子应用程序，这是由离子返回按钮，以及其他离子图标太。
错误如下：

Refused to connect to 'data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Arrow Back</title><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>' because it violates the following Content Security Policy directive: "default-src * 'unsafe-eval' 'unsafe-inline'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. data:' must be added explicitely.

(anonymous) @ polyfills.11e22041d02a3781.js:1
polyfills.11e22041d02a3781.js:1 Refused to connect to 'data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Arrow Back</title><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>' because it violates the document's Content Security Policy.

这是我的package.json

"dependencies": {
    "@angular/animations": "^13.3.0",
    "@angular/cli": "^13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@hetznercloud/ngx-translate-mock": "^0.1.0",
    "@ionic-native/android-permissions": "^5.29.0",
    "@ionic-native/barcode-scanner": "^5.29.0",
    "@ionic-native/ble": "^5.29.0",
    "@ionic-native/bluetooth-le": "^5.29.0",
    "@ionic-native/core": "^5.29.0",
    "@ionic-native/file": "^5.32.1",
    "@ionic-native/geolocation": "^5.30.0",
    "@ionic-native/http": "^5.30.0",
    "@ionic-native/in-app-browser": "^5.29.0",
    "@ionic-native/location-accuracy": "^5.33.1",
    "@ionic-native/network": "^5.29.0",
    "@ionic-native/splash-screen": "^5.29.0",
    "@ionic-native/status-bar": "^5.29.0",
    "@ionic/angular": "^6.1.0",
    "@ionic/cordova-builders": "^6.1.0",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "4.0",
    "chart.js": "^2.9.4",
    "colors": "^1.1.2",
    "cordova-plugin-android-permissions": "^1.1.0",
    "cordova-plugin-ble-central": "^1.2.5",
    "cordova-plugin-bluetoothle": "^4.5.14",
    "cordova-plugin-inappbrowser": "^3.2.0",
    "core-js": "^3.21.1",
    "ngx-toastr": "^11.3.3",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.7",
    "save": "^2.4.0",
    "tslib": "^2.0.0",
    "xmlhttprequest": "^1.8.0",
    "zone.js": "~0.11.4"
  }

ionic-framework

来源：https://stackoverflow.com/questions/71881359/ionic-icons-through-error-due-to-content-security-policy

2条答案

按热度按时间

kjthegm61#

我通过在connect-src中添加'data：'来修复它，如下所示：

<meta 
  http-equiv="Content-Security-Policy" 
  content="
    default-src * 'unsafe-eval' 'unsafe-inline';
    connect-src 'self' data:;
    font-src 'self' data:;
    img-src * data:; 
">

赞(0）回复(0）举报 2022-12-09

csbfibhn2#

我把我的离子5更新为离子6
Ionic 5的index.html文件是这样的：

<head>
  ...
  <meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'">
  ...
</head>

Ionic 6 index.html文件不包含内容安全策略 meta
删除此行解决了问题。
没有安全问题，因为Ionic团队自己删除了此约束。

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 由于“内容安全策略”错误而导致的离子图标,

2条答案

相关问题

热门标签

最新问答