Library is breaking if I don't use 'unsafe-inline' in CSP

[rishabh-jain389]

Hi Team,

We are using open-f2 to build micro front-end apps for our customers. Recently we had Penetration testing for the security of the app and the security team found that we are using 'unsafe-inline' CSP which is unsafe for the security of the security purpose. If we remove 'unsafe-inline' then open-f2 logging error on the console.

According to the security Team,
• script-src 'unsafe-inline' - Inline JavaScript code, commonly used in XSS attacks, is
allowed.
• script-src 'unsafe-eval' - Potentially dangerous JavaScript functions, such as eval(),
Function(), and setTimeout() are allowed.

Remediation they have provided
• we recommend redefining a more secure content security policy for the
application as part of a defense-in-depth strategy.
• Where possible, depreciate and remove all inline JavaScript code and use of 'data:' URIs.
• Update the application's 'Content-Security-Policy' directives to reflect this change by
removing these values.
• Establish a restrictive 'default-src' using "Content-Security-Policy: default-src 'self'" and then
open it up only where needed using the content-specific directives (e.g. script-src, objectsrc).

See the below error in the console

Please update library 1.4.5 by removing or updating unsafe inlines.

Libraray Version : 1.4.5
React Version : 16

[brianbaker]

Hi @rishabh-jain389 - a few questions:

• Do you have any examples or code samples you could share to reproduce the issue?
• Does the app you are creating make use of the inlines property of the AppManifest? https://openf2.github.io/F2/app-development.html#inline-scripts
• Have you taken a look at migrating to V2? https://openf2.github.io/F2/migrating-to-v2.html

I would imagine it would be impossible to add CSP support to V1 without a breaking change. Likewise it may be impossible to do the same in V2 as the inlines property still remains in that version. We'd really need to see the use case to be able to suggest alternatives that may work with CSP.

Thanks-

[rishabh-jain389]

Hi Brian,

- Do you have any examples or code samples you could share to reproduce the issue?
Ans -
If I remove open-f2 library then this error/code-snippet doesn't appear so that is how I come up with a issue in open-f2.

- Does the app you are creating make use of the inlines property of the AppManifest?
Ans -

- Have you taken a look at migrating to V2?
Ans - Yes tried it but it is breaking our whole app.

Thanks

[brianbaker]

That appears to be in a part of F2 v1 that included the easyXDM library. That was removed entirely in v2 of F2. v1 had some alternative builds that didn't include certain components depending on how F2 was being used. Those are called out over here https://github.com/OpenF2/F2/wiki/F2-Packages If that doesn't help, then I think you'll need to look at migrating to v2.

[rishabh-jain389]

Thanks, Brian for the information, Please confirm that v2 is compatible with React 16 and Angular 12?

[brianbaker]

F2 is itself framework agnostic. F2 v1 had things like jQuery, jQuery UI, easyXDM bundled inside of it (in a closure) where as v2 drops all of those things and uses vanilla javascript where possible. v2 is considerably smaller than v1 and removed the things that were more than likely not used out of v1.

[rishabh-jain389]

Hi @brianbaker ,
I tried to use all three alternative builds no-easyXDM.js, no-bootstrap.js, and no-jquery-or-no-bootstrap.js. I found errors in all three libraries. see below screenshots:

no-easyXDM.js

no-bootstrap.js
Same error was found in this library as mentioned above related to 'use-inline

no-jquery-or-no-bootstrap.js

Please confirm if these libraries are error-free.

Thanks

[brianbaker]

As it states on the [https://github.com/OpenF2/F2/wiki/F2-Packages](Packages wiki):

"They are ideally used when, for example, a container already has jQuery or sandboxed apps aren't needed."

So the use of the packages depends on what you already have on the page. Using no-jquery-or-bootstrap on a page that doesn't already have jQuery on it will error out. The only one that may have worked would be the no-easyXDM...

I think you're probably looking for something that can't happen.

F2 v1 was developed in a time when the Content Security Policy was really just getting started. The "new" browsers at the time like Firefox or Chrome supported parts of it but IE certainly did not. (We were still supporting IE 8 back then) I just don't think F2 v1 (or maybe even v2) is fundamentally compatible with CSP, especially given that how tight you lock down the page can vary from page to page. You will have to make concessions in your policies.

[rishabh-jain389]

Hi @brianbaker ,

We have migration problems from V1.4.5 to V2.
In V1 F2 works fine with the Angular app inside <iframe> but iframes aren't used in V2 anymore. How it should work without iframes? Our application isn't rendering inside F2 app now so we need to understand what we can change in settings.

Do you have any proper migration docs or valid examples for V2? This page has insufficient documentation https://openf2.github.io/F2/migrating-to-v2.html.

Thank!

[brianbaker]

I think we would need an example or some code snippets of what you have implemented. It sounds like you need your app to run in an iframe because its javascript/css/etc. conflict with the parent page and not because of security purposes.

The "Secure Apps" that were in V1 were there as a security feature - if a container developer/owner wanted to ensure that an app developer didn't have some kind of access to the parent page. From a framework perspective, there was no difference when apps were running inside of an iframe or not.

[dmytrolevchuk]

Hi @brianbaker!

In v.1.4.5 we have good parsing of our app inside iframe

In v2.0.0 rendering doesn't happen due to missing our inside our parent

.

Looks like that we still need to use iframe for rendering our application (we are using javascript/css/html/etc). Is there another way to change our approach in v.2.0.0?
Also secure.js is not running in F2 v2.

Thanks!

[rishabh-jain389]

Hi @brianbaker ,

Have you checked the code snippets shared by Dmytro? Please provide your suggestion.

Thanks