web-dev-qa-db-fra.com

Safari: "https: // ... bloqué de demander des informations d'identification car il s'agit d'une demande multi-origine." après la mise à jour vers Angular 8

Nous avons sécurisé notre Angular avec Basic Auth. Après mise à jour notre application de Angular 7 à 8., on ne nous demande plus les informations d'identification dans Safari et les erreurs suivantes apparaissent dans la console:

[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.

Dans Firefox et Chrome l'application fonctionne toujours sans problème. La version Safari est 12.1.1.

Quelqu'un a-t-il une idée du problème de Safari?

angularsafaribasic-authentication
10
Markus

Depuis angular/cli 8.1 (PR), il existe une option crossOrigin pour la commande ng build ( documentation ). Les valeurs possibles sont: aucune | anonyme | use-credentials (par défaut aucun).

L'utilisation de cette option modifiera les balises de script dans index.html pour ajouter l'attribut crossorigin.

Vous pouvez soit utiliser ce temporaire pour une build en utilisant: ng build --crossOrigin=anonymous

Ou utilisez l'option dans votre angular.json sous architect.build.options:

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

Il semble que certaines modifications de la spécification des scripts de module ( https://github.com/whatwg/html/pull/3656 ) n'ont pas encore été implémentées dans Safari. Pour moi, cela fonctionne sur Safari Technology Preview.

En attendant, vous pouvez le corriger en ajoutant l'attribut crossorigin sur vos scripts de module, comme ceci:

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

Voici la solution que j'ai adoptée (nécessite un package tiers).

Tout d'abord, installez ce générateur de webpack personnalisé: @angular-builders/custom-webpack :

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

Assurez-vous de vérifier les prérequis dans son fichier Lisez-moi et de mettre à jour d'autres dépendances si nécessaire.

Mettez à jour votre angular.json pour utiliser le générateur et définir l'option indexTransform:

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

Enfin, créez un fichier nommé index-html-transform.js dans le répertoire racine de votre projet avec le contenu suivant:

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

Maintenant, lorsque vous créez votre application et le index.html est émis, il ajoutera automatiquement l'attribut crossorigin à chaque script de module.

7
David

Ma solution consiste à ajouter --subresource-integrity drapeau lors de la construction:

ng build --subresource-integrity

Cet indicateur ajoute également l'attribut crossorigin aux scripts de module selon ce commentaire .

5
Sergey Koshelenko

J'ai le même problème avec Angular 8. Pour résoudre le problème, je viens de modifier mon tsconfig.json tel qu'il était avec Angular 7:

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