[BUG] CSP Restriction for TrustedTypePolicy Creation in Loading Indicator

[HT808s]

What happened?

A bug happened in plasmo dev mode!

As I understand it, it seems that some CSP in some pages can prevent execution of createPolicy, which results in the code injection of the extension to break

<meta name="trusted-types" content="script-src-attr 'none'; require-trusted-types-for 'script'; trusted-types 'allow-duplicates' default jSecure highcharts dompurify" data-disposition="enforce" data-sanitizer="RegExp" data-pattern="</?(?=(?:script|meta|base|link|iframe|form)\b)" data-replacement="</untrusted-" http-equiv="Content-Security-Policy">

I tried changing the meta tag in the page before executing that code and it worked

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

Refused to create a TrustedTypePolicy named 'trusted-html-__plasmo-loading__' because it violates the following Content Security Policy directive: "trusted-types 'allow-duplicates' default jSecure highcharts dompurify".

Uncaught TypeError: Failed to execute 'createPolicy' on 'TrustedTypePolicyFactory': Policy "trusted-html-__plasmo-loading__" disallowed.

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[gBusato]

I had the same issue, please merge the fix related ❤️

[matijamatija]

Had the same issue. Thanks for fixing this 🙏

Anything we can do to speed up merging?

[krishpatel3778]

Having the same issue in the developer mode preventing any content scripts from getting executed. Please fix this asap. Here is the description of the error "Refused to create a TrustedTypePolicy named 'trusted-html-plasmo-loading' because it violates the following Content Security Policy directive: "trusted-types 'allow-duplicates' default jSecure highcharts dompurify".

[HT808s]

I made a fix guys #986
You can always install my plasmo fork locally, build it and then bind this version like I did if you don't want to wait for the merge

Building and Linking Plasmo is explained here
https://github.com/PlasmoHQ/plasmo/blob/main/.github/CONTRIBUTING.md#as-global-link

[agungjk]

Having the same issue in the developer mode preventing any content scripts from getting executed. Please fix this asap. Here is the description of the error "Refused to create a TrustedTypePolicy named 'trusted-html-plasmo-loading' because it violates the following Content Security Policy directive: "trusted-types 'allow-duplicates' default jSecure highcharts dompurify".

error on LinkedIn, right?
I think I have the bugfix for it

[louisgv]

@HT808s can you check if the latest merge fix the issue :-?

[gBusato]

@louisgv Just tried with the version 0.87.1, it didn't

[R-iskey]

Same for me

[AssafFink]

Same, version 0.87.1 still got the error...

[EtoKruto]

Temporary Fix for CSP Issue

I found a temporary fix for the CSP issue that could help someone smarter resolve it altogether.

Steps to Reproduce:

1. Run plasmo dev.
2. Search for __plasmo-loading__ in the search/replace feature of your IDE (I use VS Code).
3. Replace the function F with the following option:

function F() {
  let e = globalThis.window?.trustedTypes;
  if (!(typeof e > "u")) 
    return $(), e.createPolicy(`jSecure`, {
      createHTML: (t) => t
    });
}

---

This should work on every refresh since the Plasmo modal which has the bug gets loaded only on the initial npm plasmo dev run and not on any refresh after. If you run npm plasmo dev again you will need to repeat the steps.

[Adriantobi]

Temporary Fix for CSP Issue

I found a temporary fix for the CSP issue that could help someone smarter resolve it altogether.

Steps to Reproduce:

1. Run plasmo dev.
2. Search for __plasmo-loading__ in the search/replace feature of your IDE (I use VS Code).
3. Replace the function F with the following option:

function F() {
  let e = globalThis.window?.trustedTypes;
  if (!(typeof e > "u")) 
    return $(), e.createPolicy(`jSecure`, {
      createHTML: (t) => t
    });
}

This should work on every refresh since the Plasmo modal which has the bug gets loaded only on the initial npm plasmo dev run and not on any refresh after. If you run npm plasmo dev again you will need to repeat the steps.

Works, but when you make changes, it just gets reset to the one produced by the build

[louisgv]

I think with #1000 (1000!!), this should now be fixed. Released in https://github.com/PlasmoHQ/plasmo/releases/tag/v0.87.2

Thanks @agungjk!

[daijinma]

Temporary Fix for CSP Issue

just exec below code in chrome console when linkedin is loading
(linkedin update so frequently)

document.head.removeChild(document.querySelector("head meta[name='trusted-types']"))