Is it possible to add crossorigin attribute to script tags generated by angular cli?

when running my angular app, script tags are added to the end of my index.html:

<script src="runtime-es2015.3d05cbd29d24231258bf.js" type="module"></script>
<script src="polyfills-es2015.28da6787754ec8436843.js" type="module"></script>
<script src="main-es2015.4106b7f4d43a05cb792d.js" type="module"></script>

Is it possible to configure angular-cli so that when those tags are included in the build index.html, that the crossorigin attribute be added to the script declaration:

<script src="runtime-es2015.3d05cbd29d24231258bf.js" type="module" crossorigin="use-credentials"></script>

Why am I asking this? My application is deployed to an apache server that uses basic authentication. When using Firefox or Edge (chrome is fine) the requests for the javascript modules receive a 401 error because the Authorization header is not set. If the crossorigin tag is added, the Authorization header is set. Therefore, I need to be able to add that crossorigin attribute if I want my users to be able to use FF or Edge.

Thank you for reading my question.

Is it possible to add crossorigin attribute to script tags generated by angular cli?

when running my angular app, script tags are added to the end of my index.html:

<script src="runtime-es2015.3d05cbd29d24231258bf.js" type="module"></script>
<script src="polyfills-es2015.28da6787754ec8436843.js" type="module"></script>
<script src="main-es2015.4106b7f4d43a05cb792d.js" type="module"></script>

Is it possible to configure angular-cli so that when those tags are included in the build index.html, that the crossorigin attribute be added to the script declaration:

<script src="runtime-es2015.3d05cbd29d24231258bf.js" type="module" crossorigin="use-credentials"></script>

Why am I asking this? My application is deployed to an apache server that uses basic authentication. When using Firefox or Edge (chrome is fine) the requests for the javascript modules receive a 401 error because the Authorization header is not set. If the crossorigin tag is added, the Authorization header is set. Therefore, I need to be able to add that crossorigin attribute if I want my users to be able to use FF or Edge.

Thank you for reading my question.

• javascript
• angular
• angular-cli

• would crossorigin="use-credentials" use credentials if the request is same origin? Perhaps you should read the documentation carefully – Jaromanda X Commented Jul 23, 2019 at 22:43
• (not related to the crossorigin attribute, but attributes in general) Take a look at this GitHub issue. Seems to be some discussion going on around how to do this. There's a couple of options in the thread it looks like: github./angular/angular-cli/issues/3323 – mwilson Commented Jul 23, 2019 at 22:49

1 Answer 1

As of angular/cli 8.1 (PR) there is a flag that can be set to alter the script tags (and link tags for that matter) in the index.html

--crossOrigin=none|anonymous|use-credentials
Define the crossorigin attribute setting of elements that provide CORS support. Default: none https://angular.io/cli/build

another alternative would have been to use a post build npm step that unwraps the index.html and alters it based on various needs

cheeriojs es in mind for these kind of manipulations on the server side (check this example for some more details)