How To Fix Playground Not Working On Safari? 6 Fixes To Try!

how to fix playground not working on safari (2)

Are you facing console errors while trying to access a website on Safari and you are not sure of how to fix playground not working on Safari? Well, do not worry. In this article, let us see how to fix playground not working on Safari.

While trying to access the google ads account or any other website, you tend to come across various errors such as 404 errors and other console errors such as the “Unrecognized Content-Security-Policy directive ‘worker-src'” error. This leads to playground not working on Safari.

To fix playground not working on Safari, download the latest version of Safari, fix typo errors, directory must be removed from CSP, enable CSP on your website, switch to a different browser.

Continue reading further to understand in detail why playground not working on Safari and what are the possible fixes.

How To Fix Playground Not Working On Safari?

Download the most recent version of Safari, correct typos, remove the directory from CSP, enable CSP on your website, and use a different browser to fix playground not working on Safari.

Modern browsers employ a header called Content-Security-Policy in their HTTP return responses to increase the document’s security or web page. You can control how resources are loaded by the browser, including JavaScript, and CSS by using the Content-Security-Policy header. The CSP console error, “Unrecognized Content-Security-Policy directive ‘worker-src'” occurs in three cases:

1.  Obsolete/deprecated directive

2.  Directivenot yet supported in the browser

3. Typo

Let us see a few possible fixes to fix playground not working on Safari.

Fix 1: Download The Latest Version Of Safari

This is frequently a technical issue with the Safari web browser on different websites and applications. You can try downloading a brand-new version of that web browser to fix playground not working on Safari.

Also Read: How To Get Safari Back On iPhone | In 3 Simple Ways!

Fix 2: Fix Typo errors

Maybe a simple error in the name of the directive or an incorrect semicolon or comma may cause the console error and may lead to playground not working on Safari. Since the semicolon (;) acts as a directive separator, the browser will treat anything that comes after it as the directive name and since the comma serves as a separator between HTTP headers with the same name, the browser will treat everything that comes after it as the name of the directive.

Hence, typographical errors require extra care, so be sure to fix them to prevent the Content Security Policy from functioning as intended and from blocking valid resources or allowing illegitimate ones to fix playground not working on Safari.

Fix 3: Directory Must Be Removed From the Content Security Policy

Few obsoleted directives such as allow, options, script-nonce, disown-opener, and referer were supported for testing reasons by a few browser manufacturers but were never included in the CSP specification. These deprecated directives are still supported by a large number of CSP plugins for CMS and Node.js packages, though, so they might unintentionally show up in the policy.

Therefore, to fix playground not working on Safari, the deprecated directive must be deleted from the Content Security Policy if it is the root of the Unrecognized Content-Security-Policy directive problem.

Also Read: How To Clear Your History In Safari

Fix 4: Discard The Error As The Directive Is Not Supported By The Browser

The CSP3 directives are not yet completely supported by all versions of Safari. As a result, Safari offers a variety of errors such as the “Unrecognized Content-Security-Policy directive ‘worker-src'”. But, the error can be disregarded if it results from the fact that the directive is not yet supported by the browser. This browser will just permit everything this incompatible directive needs to control.

Fix 5: Enable CSP On Your Website 

Add CSP to your HTTP Response Header > Set Content security Policy

CSP must be included in the startup’s configure procedure as it doesn’t add by default. You must set up your web server so that it returns the Content-Security-Policy HTTP header in order to enable CSP.

Step 1: Establish your CSP. Since a CSP can use a wide variety of directives, you can easily modify it to meet the requirements of your website or application.

Step 2: Add the CSP to your HTTP Response Header.

Step 3: Set content security policy.

Fix 6: Switch To A Different Browser

If none of the above fixes work, all you can do is switch to a new browser like Firefox or 

Chrome. Always download browsers directly from the manufacturer, never through a second or third party.

Follow these above-mentioned fixes to solve the console error and fix playground not working on Safari.

Also Read: How To Add Safari Back To The Home Screen Of iPhone and iPad? 5 Simple Ways!

Wrapping Up

Finally, we have come to the end of the guide and we hope this article has explained to you how to fix playground not working on Safari by listing out all the possible fixes. For more such informative and interesting articles, check out our page at Deasilex.

Frequently Asked Questions 

Q1. How Do You Open A Playground?

Ans. To open Playground on Xcode, head to File in the menu and click on New > Playground. We will select the Blank template to test our square function. Click Create after giving your Playground file a name.

Q2. What Is Worker Src?

Ans. The Worker, SharedWorker, or ServiceWorker scripts’ valid sources are listed in the HTTP Content-Security-Policy (CSP) worker-src directive.

Q3. How do I fix Content-Security-Policy?

Ans. Use a semicolon to separate multiple directives when creating a CSP.

Use frame-src to prevent iframes

Use script-src to prevent JavaScript

Use img-src to limit content other than images

Only accept content with the same origin using default-src

Q3. What Is Child Src In CSP?

Ans. The acceptable sources for web workers and nested browsing contexts loaded using elements such as frame> and iframe> are specified by the HTTP Content-Security-Policy (CSP) child-src directive. 

Q4. How Do I Disable CSP In My Browser?

Ans. To remove the Content-Security-Policy header for the tab, click the extension symbol. Click the extension icon again to re-enable the Content-Security-Policy header. Only use this as a very last option. By turning off Content-Security-Policy, you’re turning off security safeguards that guard against cross-site scripting.

Q5. How Do You Test A CSP Policy?

Ans. Examine the Content-Security-Policy HTTP response header or the CSP meta element in a proxy tool to check for incorrect CSP configurations. The unsafe-inline directive permits inline scripts or styles, making applications vulnerable to XSS assaults.

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top