CSP error when using a third party Blazor UI Control

[Tony20221]

I was trying to using a textbox from DevExpress UI control and got a CSP error. Refused to load the script 'https://www.amazon.com/_content/DevExpress.Blazor/modules/dx-blazor-cdd27ee4.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost: http://127.0.0.1:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Chrome blocked it. I am not sure why it's blocking it. First, it's part of the extension and second why Chrome is showing it's being loaded from Amazon instead of the extension. Maybe because the UI control is loading the js dynamically.

I modified the content_security_policy property in the manifest file like this by adding 'https://*'.

"content_security_policy": {
  "extension_pages": "script-src 'self' https://* 'wasm-unsafe-eval'; object-src 'self'"
},

but I am still getting the error. Any ideas how to fix this?

[mingyaulee]

I think this is most likely something that can be fixed in ProxyJsRuntime where we intercept import calls to JS. It just needs to prepend the extension base URL to the import parameter. I'll add this and make a release, hopefully by this week.

[mingyaulee]

This should be fixed in v1.4.2. Please reopen this issue if it is still not working as expected.

[Tony20221]

The error went away but I am getting an error specific to DevExpress control. I don't think it's an issue with the browser extension, instead it's related to their controls. They weren't tested to be used in a chrome extension therefore I understand they might not work in a chrome extension.

Thanks for the help.

[mingyaulee]

Are you able to share a screenshot of the error message in the console? I can take a look at it and see if it might be due to running in browser extension.

[Tony20221]

This is the error and the file.

custom-element-267f9a21.zip

[mingyaulee]

Does this happen only in content scripts or in all other pages too? The script is calling a function customElements.define(), expecting customElements to be an object but based on this error, it is undefined (similar to null in DotNet). If it is happening on other pages too then likely it is an issue from the library, otherwise there is probably another error causing the customElements to be undefined.

[Tony20221]

I am using the samples to do a quick test.

I used now SidebarUsingIframe. On my machine there's a modules subfolder that has 113 js files, screenshot shows some files, that belong to devexpress. I can't find them in the browser after installing the extension in the browser and rendering a webpage. Where are they located? Chrome shows that it tried to load one of them and it wasn't available.

[mingyaulee]

From the request it looks like the file being imported is still using _content, which means you will get 404 for the request. Are you using the latest version of the Blazor.BrowserExtension package? If yes, can you find out where and how is this JS being imported from? You can do so by using the Requests tab in the DevTools, check the stack from the Initiator column to see if it comes from another JS in the same library or from dotnet.

[Tony20221]

I am using the latest package.

This is the stack trace. The error comes from an import statement in blazor.webassembly.js

[Tony20221]

You can set up everything in a few minutes if you want you see it on your machine. Download and install DevExpress Blazor. https://go.devexpress.com/DevexpressDownload_UniversalTrial.aspx

In the SidebarUsingContentScripts sample:

• Add the DevExpress.Blazxor package using Manager Nuget Packages.. There should be a Nuget package source to a local devexpress package folder. The installer adds it.

• Add this code to program.cs

  builder.Services.AddDevExpressBlazor(options => {
  options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5;
  options.SizeMode = DevExpress.Blazor.SizeMode.Medium;
  });

• In _Imports.razor add this line: @using DevExpress.Blazor

• In ContentScript.razor, Add this markup:

  
  <DxTextBox @bind-Text="@TextValue"
         CssClass="cw-320"
         InputId="tbOverview" />
  <p class="demo-text cw-320 mt-3">
  The entered text is: <b>@TextValue</b>
  </p>

And this code:

`  string TextValue { get; set; } = "Nancy Davolio";`

Publish and load the extension. The extension shows the textbox. When you type in it and hit enter, the text should show what has been typed. Similar to here: [https://demos.devexpress.com/blazor/TextBox](https://demos.devexpress.com/blazor/TextBox)
However, it doesn't work and there are errors.
The DevExpress demos are available locally at C:\Users\Public\Documents\DevExpress Demos 24.1\Components\Blazor\BlazorDemo.Wasm\CS\BlazorDemo.Wasm.sln

[mingyaulee]

I have checked on the function in the stack trace. It is actually still an import call to the IJSRuntime from dotnet. I am reopening this issue until a fix is released.

[mingyaulee]

This issue should be fixed in v1.4.3

[Tony20221]

It's working in the SidebarUsingIframe sample. Thanks. However, it's not working in SidebarUsingContentScripts sample. It's the same textbox and code in both samples. I am not sure why it works in one but not the other.

These are screenshots from the error:

[mingyaulee]

After further investigation, it seems that the DevExpress package renders a script element into the DOM, which in the case of content scripts, will execute in the context of the page instead of the context of the content script. Therefore the custom-element.js is unable to access the variables declared in the context of the content scripts.

I am uncertain yet whether we should fix this because my concern is if the injected script is actually meant to execute in the page's context instead of content script. I will keep this issue open until then.