Application fails to launch after disabling unsafe-eval in the restricted Content Security Policy settings

Description

My application is facing issues due to having a restricted CSP policy that does not allow unsafe-eval for scripts. When I add a Content-Security-Policy header without unsafe-eval, my application fails to load.

Minimal Reproduction

The restrictive CSP header is being passed through the nginx proxy configuration file.

add_header Content-Security-Policy "default-src 'self';  script-src 'self' 'nonce-$request_id'

I have removed the unsafe-eval which is causing the application loading issue.

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'

To reproduce this error, you can directly add this CSP in the index.html file.

<meta http-equiv="Content-Security-Policy" content= "default-src 'self' 'nonce-$request_id' ; script-src 'self' 'nonce-$request_id' ; style-src 'self' 'unsafe-inline'; frame-ancestors 'self';">

My project uses Angular version 9 with ahead-of-time (AOT) compilation enabled.

Exception or Error

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-17279687d574ebf5358210888e9e9395'".

at new Function (<anonymous>)
at b.N (vendor.c63b596435f6d085789d.js:1)
at b.c (vendor.c63b596435f6d085789d.js:1)
at Object.D [as resolveRef] (vendor.c63b596435f6d085789d.js:1)
at Object.t.exports [as code] (vendor.c63b596435f6d085789d.js:1)
at Object.t.exports [as validate] (vendor.c63b596435f6d085789d.js:1)
at Object.t.exports [as code] (vendor.c63b596435f6d085789d.js:1)
at t.exports (vendor.c63b596435f6d085789d.js:1)
at N (vendor.c63b596435f6d085789d.js:1)
at b.t (vendor.c63b596435f6d085789d.js:1

Your Environment

Angular Version: Angular CLI: 9.1.13 Node: 16.2.0 OS: win32 x64

Angular: 9.1.13

angulartypescriptnginxangular9nginx-config

Answer №1

Although this information may not directly address the original question, I felt it important to share for anyone who may find it useful.

Recently, I encountered a similar issue where disabling unsafe-eval caused my development application to crash entirely. It turned out that the culprit was JIT compilation, and switching to AOT resolved the issue for me.

If you're facing a similar problem, you can check out this link to a related discussion on the Angular github repository.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Angular 5 to implement URL routing by clicking a button, while also preserving the querystring parameters within the URL

I have a link that looks like this http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0 The router module is set up to display content based on the above URL structure { path: & ...

javascriptangulartypescriptroutesangular-routing

In TypeScript, the catch block does not get triggered

I created a custom pipe in Angular that is supposed to format passed parameters to date format. The pipe contains a try-catch block to handle any errors, but surprisingly the catch block never seems to be executed even when an invalid date is passed. impo ...

javascriptdateangulartypescript

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

Is there a way to disable a specific radio button based on a condition and display a tooltip only for that disabled button? https://i.stack.imgur.com/niZK1.png import {Tooltip} from '@mui/material'; <Tooltip titl ...

javascriptreactjstypescriptmaterial-ui

The absence of essential DOM types in a TypeScript project is causing issues

Recently, I've been working on setting up a web app in TypeScript but I seem to be missing some essential types that are required. Every time I compile using npm run build, it keeps throwing errors like: Error TS2304: Cannot find name 'HTMLEleme ...

javascripttypescriptnpm

npm is unable to install a forked git repository in its current state

Attempting to install a customized version of ng2-smart-table on my application, but npm seems to be struggling with the process. I've experimented with various commands such as npm install git+http://github.com/myusername/ng2-smart-table.git npm i ...

javascriptangularnpm

Converting text data into JSON format using JavaScript

When working with my application, I am loading text data from a text file: The contents of this txt file are as follows: console.log(myData): ### Comment 1 ## Comment two dataone=1 datatwo=2 ## Comment N dataThree=3 I am looking to convert this data to ...

javascriptangulartypescriptecmascript-6

What methods can I use to integrate a Google HeatMap into the GoogleMap object in the Angular AGM library?

I am trying to fetch the googleMap object in agm and utilize it to create a HeatMapLayer in my project. However, the following code is not functioning as expected: declare var google: any; @Directive({ selector: 'my-comp', }) export class MyC ...

javascriptangulargoogle-mapstypescriptheatmap

Merge topics together in RxJS like zip

Is it possible to create an observable that combines two subjects in a unique way, different from the zip function? The goal is to combine two subjects so that when both have emitted values, the latest of their values is emitted. Then, after both emit at ...

javascriptangulartypescriptrxjs

Utilizing properties from the same object based on certain conditions

Here's a perplexing query that's been on my mind lately. I have this object with all the styles I need to apply to an element in my React app. const LinkStyle = { textDecoration : 'none', color : 'rgba(58, 62, 65, 1)', ...

javascriptreactjstypescriptobjectjsx

Issue with form array patching causing value not to be set on material multiple select

When attempting to populate a mat-select with multiple options using an array of ids from Firestore, I encountered an issue. The approach involved looping through the array, creating a new form control for each id, and then adding it to the formArray using ...

javascriptangularangular-materialangular-reactive-forms

Unable to locate the JSON file in the req.body after sending it through an HTTP post request

I have been working on implementing a new feature in my application that involves passing a JSON file from an Angular frontend to a Node backend using Express. The initial code reference can be found at How do I write a JSON object to file via Node server? ...

javascriptjsonnode.jsexpressangular

A guide to playing a series of audio files in succession using the Ionic Media plugin

I have been attempting to create a playlist of multiple audio files using the Ionic media plugin from here. However, I am struggling to achieve this without resorting to using a timeout function. Here is my current approach: playOne(track: AudioFile): Pr ...

javascriptangularionic-frameworkionic4cordova-media-plugin

Error in Nestjs Swagger: UnhandledPromiseRejectionWarning - The property `prototype` cannot be destructed from an 'undefined' or 'null' object

Currently, I am in the process of developing a Nestjs REST API project and need to integrate swagger. For reference, I followed this repository: https://github.com/nestjs/nest/tree/master/sample/11-swagger However, during the setup, I encountered the foll ...

javascripttypescriptswaggernestjs

provide an element reference as an argument to a directive

I am trying to figure out how to pass an element reference to a directive. I know that I can get the reference of the element where the directive is applied using private _elemRef: ElementRef but my goal is to pass the reference of another element to the ...

javascriptangular

The Material UI button shifts to a different row

I need help adjusting the spacing between text and a button on my webpage. Currently, they are too close to each other with no space in between. How can I add some space without causing the button to move to the next line? const useStyles = makeStyles((the ...

javascriptcssreactjstypescriptmaterial-ui

typescript defining callback parameter type based on callback arguments

function funcOneCustom<T extends boolean = false>(isTrue: T) { type RETURN = T extends true ? string : number; return (isTrue ? "Nice" : 20) as RETURN; } function funcCbCustom<T>(cb: (isTrue: boolean) => T) { const getFirst = () => ...

javascripttypescripttypescript-generics

What is causing styled-components to include my attributes in the DOM?

In various parts of my code, there is a snippet like this: import React from 'react' import styled from 'styled-components' type PropsType = { direction?: 'horizontal' | 'vertical' flex?: number | string width ...

javascriptreactjstypescriptnext.jsstyled-components

In Typescript with Vue.JS, the type 'Users[]' does not include the essential properties of type 'ArrayConstructor' such as isArray, prototype, from, of, and [Symbol.species]

Embarking on my journey with typescript and vuejs, I stumbled upon a perplexing error that has halted my progress for the past 48 hours. The error message reads as: Type 'Users[]' is missing the following properties from type 'ArrayConstruct ...

javascripttypescriptvue.jssupabase

Connecting the mat-progress bar to a specific project ID in a mat-table

In my Job Execution screen, there is a list of Jobs along with their status displayed. I am looking to implement an Indeterminate mat-progress bar that will be visible when a Job is executing, and it should disappear once the job status changes to stop or ...

javascriptangulartypescriptangular7

Hover shows no response

I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected. I've considered replacing the i tag with an a, and have also tried using both display: none and display: bloc ...

javascripthtmlcssangulartypescript