SPFx 1.8.1 web part fails after deployment

[EwoutAlbrecht]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

After deploying I expect the Hello World web part to appear on the page.

Observed Behavior

The Hello World web part throws an error:

In addition, the following errors are logged in the console log:
[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-eval' 'nonce-92781a6d-c57c-44f5-91f2-21053a7def05' ". Either the 'unsafe-inline' keyword, a hash ('sha256-loxWTWKLvS2inc78RGkweVlnJqAWCynWzlNaHssAmxA='), or a nonce ('nonce-...') is required to enable inline execution.

[Report Only] Refused to load the script 'https://static.sharepointonline.com/bld/_layouts/15/16.0.8817.1211/1033/initstrings.js' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-eval' 'nonce-92781a6d-c57c-44f5-91f2-21053a7def05' ". 'strict-dynamic' is present, so host-based whitelisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

These are similar to the errors described in this issue.

Steps to Reproduce

1. Scaffold a new project.
2. Run the web part in the workbench, this should go fine
3. Deploy the web part and place it on a page, the above errors appear.

Additional information:

• The version of the SPFx generator is 5.6.0, obtained through npm -v @microsoft/generator-sharepoint => 5.6.0
• The resulting package.json: package.json.txt, SPFx is version 1.8.1
• A colleague of mine built a project with SPFx version 1.7. 0 (older generator), this one didn't have any issue.
• I tried downgrading the project, however, that didn't have any effect.
• We tried upgrading my colleague's project, which didn't break the web part

As you can see by the things I've tried, my first assumption was in regard to the SPFx version, but the test of my colleague seem to disprove that.
If you have any additional questions or things I need to try for additional info, let me know.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patmill]

So, the CSP error is currently just a warning, although soon it will actually block the code, as it looks like you are doing something bad. My guess is that you are doing .InnerHTML = "<script>" type code, which is a bad practice security wise, as it looks (to the browser) like someone is exploiting a XSS vulnerability. Can you share out your render code by any chance? As you say, an older version of the framework doesn't fix the issue for you, and a newer version of the framework doesn't break it for your coworker. The problem is somewhere in your code.

[EwoutAlbrecht]

I think I found the trigger, it is in this choice during the scaffolding:

? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? Yes

If the answer is No, there are no issues, however, the current issue arises when you answer Yes to this question.

For me this would solve the issue, but for the sake of completeness, here is my code for the render function:

public render(): React.ReactElement {
return (
<div className={ styles.raboHubEwoutTest }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.

<p className={ styles.description }>{escape(this.props.description)}

<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more





);
}

[andrewconnell]

Can you provide some details on your environment? Browser? You're doing this in SharePoint Online correct?

That question will tell SPO that when the web part is added to a page, it's loaded in an IFRAME, otherwise, it's loaded in a DIV.

There's a more than happens behind the scenes, but essentially if that's all your code is above doing, the DIV/IFRAME is the only thing affecting it.

[EwoutAlbrecht]

@andrewconnell Sorry for the late reply! It is indeed an SPOnline web part. Browsers in which I've observed the behavior are IE 11 and Chrome.

[andrewconnell]

OK... back to this point you made:

? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? Yes
If the answer is No, there are no issues, however, the current issue arises when you answer Yes to this question.

Setting it to YES means the web part will render in an IFRAME, not a DIV. Unfortunately, based on the information provided, it's not clear what's wrong. Maybe share the code in your web part to show what it's doing to get more context to help better... at this point there's not much to go on.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

[msft-github-bot]

Closing issue due no response from original author. If this issue is still occurring, please open a new issue with additional details. Notice that if you have included another related issue as additional comment on this, please open that also as separate issue, so that we can track it independently.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues