On iPad Safari Dev Tool Getting Error "Refused to execute JavaScript URL"

Question

Over the weekend the following formula field building a link stopped working on iPad.

IF (ShowCustomLink__c, HYPERLINK("/apex/MyVfPage?id="&Id + "&var1=val1" + "&var2="&Name, IMAGE("/resource/ResourceWithButtonImages", "Alt Text"),"_self"), NULL)

This formula field generates the following markup:

<a href="javascript:void(0)" ontouchstart="javascript:{ var openEvent = 
$A.get('e.force:navigateToURL');  openEvent.setParams({'url':'/apex/MyVfPage?
id=[SfIdHere]&amp;var1=val1&amp;var2=val2'});openEvent.fire();}" data-aura-
rendered-by="394:282;a"><img src="/resource/ResourceWithButtonImages" 
alt="Alt Text" border="0"></a>

Using my Mac and Safari dev tools to inspect and view the browser console I see the following two errors.

Refused to execute inline event handler because it violates the following 
Content Security Policy directive: "script-src 'self' chrome-extension: 
https://sfdc.azureedge.net *.na30.visual.force.com
https://ssl.gstatic.com/accessibility/".

Refused to execute JavaScript URL because it violates the following Content 
Security Policy directive: "script-src 'self' chrome-extension: 
https://sfdc.azureedge.net *.na30.visual.force.com 
https://ssl.gstatic.com/accessibility/".

I brushed up on my understanding of Content Security Policy directive script-src and determined that the markup generated by the formula field HYPERLINK function is causing the violations by using the inline ontouchstart event and the javascript: in the href attribute. I suspect SF changed the Content Security Policy header at some point causing this to break. Any suggestions on a workaround to this problem or another way to build the hyperlink so it is compliant with the CSP header?

Answer 1

The solution that worked for me is to create a Custom Link and add it to the layout. Below are specific steps on how to accomplish. The advantage of this is it outputs a simple anchor HTML element defining only the href attribute and does not use inline javascript. This did change the look and feel some from how it worked before but I believe it is acceptable given the circumstances.

1. Login to you org
2. Go to [User Name] > Setup
3. In left hand pane choose Create > Objects
4. Locate the object which you would like to have a hyperlink on and click on its name
5. Scroll down to Buttons, Links, and Actions
6. Click New Button or Link button
7. You can give the button a name, use merge fields as well as determine the behavior of how the browser opens the hyperlink. NOTE: if the URL is pointing to a resource on your org use a relative path starting with "/...". E.g. for a VF page would look something like this "/apex/MyVFPage".
8. Save the button once you have configured it with the correct settings.
9. Open a record of the same object type which you are adding the custom button link to
10. Click Edit Layout from the links in the upper right portion of the view
11. Choose Custom Links from the left hand side pane
12. You should see the hyperlink you just created and be able to drag it to the Custom Links section of the layout
13. Save
14. The new custom link should appear after the custom and standard object fields section.

Answer 2

Since inline javascript execution is a security vulnerability issue, salesforce has stopped it's support to this https://help.salesforce.com/articleView?id=000249336&language=en_US&type=1