webpack - Override Subresource Integrity algorithm for Angular builds - Stack Overflow

admin管理员组

文章数量:1122833

I am using Angular v17 and configuration allows for setting subresourceIntegrity to true which will add the integrity hash to the <script> tags that import the compiled Angular project.

This is simple and great, except that it will only use sha384. I need to use a different algorithm for the checksum (TL;DR...using AWS CLI to upload the source files and it does not support SHA384)

I have tried using a custom webpack file and adding the webpack-subresource-integrity with hashFuncNames: ['sha256'] like:

  ...,
  plugins: [
    new SubresourceIntegrityPlugin({
      enabled: true,
      hashFuncNames: ['sha256'],
    }), 
   ...

However, if I set subresourceIntegrity to true in the angular.json options, it seems to ignore my setting and continue to use sha384. If I set subresourceIntegrity to false, it will not set the integrity attribute.

I'm not as comfortable with webpack as I would like, but tried to create a custom plugin that does something similar and simply don't know enough to get it to work.

Can anyone assist with an example of how to use a fully customizable index.ejs file, custom plugin, existing Angular configuration, etc. to get my compiled index.html file to have something like:

 <script src="main.js" integrity="sha256-aof08ans0df8yaf0" crossorigin="anonymous"></script>

I am using Angular v17 and configuration allows for setting subresourceIntegrity to true which will add the integrity hash to the <script> tags that import the compiled Angular project.

This is simple and great, except that it will only use sha384. I need to use a different algorithm for the checksum (TL;DR...using AWS CLI to upload the source files and it does not support SHA384)

I have tried using a custom webpack file and adding the webpack-subresource-integrity with hashFuncNames: ['sha256'] like:

  ...,
  plugins: [
    new SubresourceIntegrityPlugin({
      enabled: true,
      hashFuncNames: ['sha256'],
    }), 
   ...

However, if I set subresourceIntegrity to true in the angular.json options, it seems to ignore my setting and continue to use sha384. If I set subresourceIntegrity to false, it will not set the integrity attribute.

I'm not as comfortable with webpack as I would like, but tried to create a custom plugin that does something similar and simply don't know enough to get it to work.

Can anyone assist with an example of how to use a fully customizable index.ejs file, custom plugin, existing Angular configuration, etc. to get my compiled index.html file to have something like:

 <script src="main.js" integrity="sha256-aof08ans0df8yaf0" crossorigin="anonymous"></script>

• angular
• webpack
• webpack-5
• angular17
• subresource-integrity

Share Improve this question Follow asked Nov 22, 2024 at 23:00 Wayne KaskieWayne Kaskie 3,47455 gold badges3535 silver badges4949 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You have to raise a feature request on Angular Cli Github to request this customization. Currently it is hard coded to sha384.

You can mention that deploying to AWS does not support it and it seems like a valid requirement for everyone to use AWS and angular together.

Angular CLI - common.ts Source Code

  if (subresourceIntegrity) {
    extraPlugins.push(
      new SubresourceIntegrityPlugin({
        hashFuncNames: ['sha384'],
      }),
    );
  }

本文标签： webpackOverride Subresource Integrity algorithm for Angular buildsStack Overflow