HTML 5 - Controls -> Change Content-Security-Policy settings

2025-11-11T08:43:46.723000Z

Sorry for being late to the party... so it is not possible to use the webbrowser tool to display external websites in a visu anymore (without an unsafe amount of hacking)? We need to display data read from a Raspberry Pi in our webvisu and used to do it by entering the Pi's IP address as the URL variable in the webbrowser element but now (since I don't know when) "The page’s settings blocked the loading of a resource (frame-src) at 'safeURL' because it violates the following directive: “default-src 'self' 'unsafe-inline'”. What are the options for displaying the data?

HTML 5 - Controls -> Change Content-Security-Policy settings

2022-11-02T08:23:34.919000Z

Just a warning. Changing the generated csp and attributes on the iframe may allow bad people to run a DOS on your PLC causing a crash or loss of data.

HTML 5 - Controls -> Change Content-Security-Policy settings

2022-10-31T09:30:34.809000Z

Hello hx05,

"ContentSecurityPolicyIncludeTrustedOrigins" : "font-scr 'self' http://localhost:8080"

is definitely wrong.

You should use

"ContentSecurityPolicyIncludeTrustedOrigins" : "http://localhost:8080 https://raw.githubusercontent.com/LearnWebCode/json-example/master/"
or just
"ContentSecurityPolicyIncludeTrustedOrigins" : "*" (to allow any sources - i don't recommend that)

According to font-src, if font-src directive is absent, the user agent will look for the default-src directive. So "*" or "http://example.com/font/" or 'self' http://localhost:8080/ should be good enough. Try this firts, please, i haven't

According to object-src, it is recommended to restrict this fetch-directive (e.g. explicitly set object-src 'none' if possible). There must be a good reason why this value is set to 'none'.

The "home use" or just only for education purposes (my case), you could edit webvisu.js in visu directory of your PLC.
You find in this file "default-src {0}; object-src 'none'; script-src {0}; img-src {1}; style-src {2}; style-src-elem {2}; base-uri 'none';"

The html iFrame and its CSP is generated by this webvisu.js:

{0} is replaced with "'nonce-xxxxx' 'unsafe-inline' and content string in ContentSecurityPolicyIncludeTrustedOrigins (CSPITO).
{1} is replaced with 'self' http://localhost:8080 (in win-plc), CSPITO and data:
{2} is replaced with 'nonce-xxxxxx' 'unsafe-inline' CSPITO and data:

More about nonce here

So you could change object-src 'none' to object-src {0} or {1} or {2} or whatever-you-want, save the file and try the behavior.

Login with download rewrites webvisu.js and webvisu.cfg.json. To avoid that, just rename Name of .htm file in Codesys (Visualization manager -> WebVisu) for example 'webvisu1.htm'. Also rename "upgraded" webvisu.js to webvisu_.js and change this in the generated webvisu.htm file as well ( <script language="javascript" src="webvisu_.js"></script>). Then call http://..../8080/webvisu.htm in a browser.

Next Login with download generates webvisu1.js and webvisu1.cfg.json Your upgraded files will remain unaffected.

If you also had a problem with Access-Control-Allow-Origin' error message in a browser, it's because the html iFrame is sandboxed. sandbox="allow-scripts". Well, if you add allow-same-origin you get rid of this message.

HTML 5 - Controls -> Change Content-Security-Policy settings

2022-10-27T09:14:28.934000Z

Hello dasis,

as the documentaion (https://content.helpme-codesys.com/en/CODESYS%20Visualization/_visu_security_notes_html5.html) says, i change the config file (/PLCLogic/visu/webvisu.cfg.json) to:

{
    "UpdateRate": 200,
    "PlcAddress": "0301.3041",
    "UseLocalHost": true,
    "Application": "Application",
    "StartVisu": "Visualization_Main",
    "BestFit": true,
    "LogLevel": "INFO",
    "CommBufferSize": 50000,
    "HasKeyboard": false,
    "TouchHandlingActive": false,
    "HandleTouchEvents": true,
    "ScaleTypeIsotropic": true,
    "BestFitForDialogs": true,
    "RuntimeVersion": "3.5.18.20",
    "LoginVisu": "",
    "FillBackground": true,
    "ContentSecurityPolicyIncludeTrustedOrigins" : "font-scr 'self' http://localhost:8080"
}

but this puts out a damaged CSP-Line:

<meta http-equiv="Content-Security-Policy" content="
default-src 'nonce-SWyWc7DbO4CI8cCrXQjjZw==' 'unsafe-inline' 
font-scr 'self' http://localhost:8080; 
object-src 'none'; 
script-src 'nonce-SWyWc7DbO4CI8cCrXQjjZw==' 'unsafe-inline' 
font-scr 'self' http://localhost:8080; 
img-src 'self' http://localhost:8080 
font-scr 'self' http://localhost:8080 data:; 
style-src 'nonce-SWyWc7DbO4CI8cCrXQjjZw==' 'unsafe-inline' 
font-scr 'self' http://localhost:8080 data:; 
style-src-elem 'nonce-SWyWc7DbO4CI8cCrXQjjZw==' 'unsafe-inline' 
font-scr 'self' http://localhost:8080 data:; 
base-uri 'none';">

Also, changes in the webvisu.cfg.json do not overwrite any values, only new ones are added but not i a workable way.
Therefore I think a change of

object-src 'none'

is currently not possible. What is your solution for "homen use"?

HTML 5 - Controls -> Change Content-Security-Policy settings

2022-10-21T06:34:55.196000Z

Hello,

have You found a solution for this? I might have one, but only for home use! I am sure, it cannot be done by setting something in Codesys. Which is really sad, CSP is too restrictive for HTML5 components.

HTML 5 - Controls -> Change Content-Security-Policy settings

2022-09-21T14:52:24.325000Z

Hello togheter,

is there anyone who knows how to change the CSP-Settings inn the generateted HTML5 code for the controls?
By default CSP for object-scr is 'none' and font-src is not set, i would like to chnage it to:

object-scr 'self' http://localhost:8080  data:; font-scr 'self' http://localhost:8080;

Recent posts to HTML 5 - Controls -> Change Content-Security-Policy settings

HTML 5 - Controls -> Change Content-Security-Policy settings

HTML 5 - Controls -> Change Content-Security-Policy settings

HTML 5 - Controls -> Change Content-Security-Policy settings

HTML 5 - Controls -> Change Content-Security-Policy settings

HTML 5 - Controls -> Change Content-Security-Policy settings

HTML 5 - Controls -> Change Content-Security-Policy settings