search

PlasmoHQ / plasmo

🧩 The Browser Extension Framework
https://www.plasmo.com
MIT License
10.31k stars 358 forks source link

[BUG] CSP Restriction for TrustedTypePolicy Creation in Loading Indicator #985

Closed HT808s closed 3 months ago

HT808s commented 4 months ago

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

Code of Conduct

gBusato commented 4 months ago

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

matijamatija commented 4 months ago

Had the same issue. Thanks for fixing this 🙏

Anything we can do to speed up merging?

krishpatel3778 commented 3 months ago

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 commented 3 months ago

I made a fix guys https://github.com/PlasmoHQ/plasmo/pull/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 commented 3 months ago

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 commented 3 months ago

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

gBusato commented 3 months ago

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

CleanShot 2024-06-10 at 14 50 59

R-iskey commented 3 months ago

Same for me

AssafFink commented 3 months ago

Same, version 0.87.1 still got the error...

EtoKruto commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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']"))