web-dev-qa-db-ja.com

Safari：「https：// ...はクロスオリジンリクエストであるため、資格情報の要求をブロックしました。」 Angular 8に更新した後

Angular基本認証を使用してWebアプリを保護しました。更新後更新私たちのアプリfrom Angular 7 to 8.、Safariで認証情報を要求されなくなり、次のエラーがコンソールに表示されます。

[Error] Blocked https://*/runtime-es2015.4f263ec725bc7710f1f5.js from asking for credentials because it is a cross-Origin request.
[Error] Blocked https://*/main-es2015.6fa442dd5c5a204f47da.js from asking for credentials because it is a cross-Origin request.
[Error] Blocked https://*/polyfills-es2015.fd951ae1d7572efa3bc6.js from asking for credentials because it is a cross-Origin request.

FirefoxおよびChrome=アプリは引き続き問題なく実行されます。Safariのバージョンは12.1.1です。

Safariの問題が何か知っている人はいますか？

angularsafaribasic-authentication
10
Markus

Angular/cli 8.1（PR）以降、ngビルドコマンド（ documentation ）にはオプションcrossOriginがあります。可能な値は次のとおりです。匿名| use-credentials（デフォルトはnone）。

このオプションを使用すると、index.htmlのスクリプトタグが変更され、crossorigin属性が追加されます。

次のいずれかを使用して、この一時ファイルをビルドに使用できます：ng build --crossOrigin=anonymous

または、architect.build.optionsの下のangular.jsonのオプションを使用します。

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "crossOrigin": "anonymous", // <-- set value here
        // other options
9
Tobias Malikowski

モジュールスクリプト仕様の一部の変更（ https://github.com/whatwg/html/pull/3656 ）は、まだSafariに実装されていないようです。私にとっては、Safari Technology Previewで動作します。

当面は、次のようにモジュールスクリプトにcrossorigin属性を追加することで修正できます。

<script src="runtime-es2015.ff56c41ec157e6d9b0c8.js" type="module" crossorigin></script>

これが私が採用したソリューションです（サードパーティのパッケージが1つ必要です）。

まず、このカスタムWebpackビルダーをインストールします。 @angular-builders/custom-webpack ：

npm i -D @angular-builders/custom-webpack

Readmeで前提条件を確認し、必要に応じて他の依存関係を更新してください。

angular.jsonを更新してビルダーを使用し、indexTransformオプションを設定します。

"projects": {
  ...
  "your-app": {
    ...
    "architect": {
      ...
      "build": {
        "builder": "@angular-builders/custom-webpack:browser"
        "options": {
            "indexTransform": "./index-html-transform.js"
              ...
        }

最後に、プロジェクトのルートディレクトリにindex-html-transform.jsという名前のファイルを作成し、次の内容を含めます。

module.exports = (targetOptions, indexHtml) => {
  const regex = /(<script.*?type="module".*?)>/gim;
  return indexHtml.replace(regex, "$1 crossorigin>");
};

これで、アプリをビルドしてindex.htmlが発行されると、crossorigin属性がすべてのモジュールスクリプトに自動的に追加されます。

7
David

私の解決策は、ビルド時に--subresource-integrityフラグを追加することです：

ng build --subresource-integrity

このフラグは このコメント に従ってcrossorigin属性をモジュールスクリプトに追加します。

5
Sergey Koshelenko

Angular 8.でも同じ問題が発生します。この問題を修正するには、_tsconfig.json_をAngular 7の場合と同様に編集しました。

_{
  ...
  "compilerOptions": {
    ...
    "module": "es2015",
    ...
    "target": "es5",
    ...
  }
}
_
0
Alexander Belov