Unable to access HTML “target” attribute with locker service

Question

I am facing an issue with the Locker Service. I have a simple piece of code. I have attached the code here. The issue is that if the Locker Service is disabled, I am able to open a link in new tab using "target" attribute the element output is as shown in the screenshot. Whereas, if it is enabled, I am unable to open a link in new tab using "target" attribute. I have attached both screenshots as well as the code. Winter 17 - Salesforce

DemoTestApp.app

<aura:application >
 <c:testJqueryComponent />
</aura:application>

DemoTest.cmp

<aura:component >
<ltng:require scripts="{!join(',',
                       $Resource.jQuery + '/jquery/lightning/js/jquery-2.2.4.min.js',
                       $Resource.jQuery + '/jquery/lightning/js/jquery-migrate-1.3.0.min.js')}" 
              afterScriptsLoaded='{!c.doResult}'/>
<div id="divTest"></div>
<button id="btnView" >Read TR</button>
</aura:component>

DemoTestController.js

({
    doResult : function(component, event, helper) {
    $("#divTest").html('<table><tr role="row">'
                       +'<td role="cell" aria-describedby="1">value 1</td>'
                       +'<td role="cell" aria-describedby="2"><a target="_blank" href="www.google.com">google</a></td>'
                       +'</tr></table>');
}
)}

Elements output: Locker service is disabled

Elements output: Locker service is enabled

Answer 1

The fix for this is scheduled to be released in the Spring '17 major release.

Until then please try to move your HTML in to your markup file. Or you can try a dynamically created component solution like @Pavlonator suggests, though that is a bit of extra overhead.

Answer 2

What lightning does - it sanitized everysingle DOM element, even document itself, even window. so if you will try to do something ltng consider dangerous - it will block you.

But your case is luckily not dangerous. Even using jQuery should have worked, but untill the locker service bug is fixed, all you have to do is to follow Lightning best practices.Among those there two approaces:

1. using facets
2. less encouraged, but still, lightning way - conditional rendering/or css analogue

here is the example with facets:

<aura:attribute name="testBody" access="public" type="Aura.Component[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div id="divTest">
    {!v.testBody}
</div>
<button id="btnView" >Read TR</button>

on script load can still be used, it just happened that my example does not need jQuery. extract conditional piece of UI into separate component:

<aura:component >
<table>
    <tr role="row">
        <td role="cell" aria-describedby="1">value 1</td>
        <td role="cell" aria-describedby="2"><a target="_blank" href="www.google.com">google</a></td>
    </tr>
</table>

the controller for your top component (not for the extracted one):

    ({
    doInit: function(cmp, event, helper) {
        $A.createComponent("c:testerTr", {}, function(newCmp, status, errorMessage){
                if (status === "SUCCESS") {
                    var testBody = cmp.get("v.testBody");
                    testBody.push(newCmp);
                    cmp.set("v.testBody", testBody);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                }
                else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                }
            });
    }
    })

the example above does render link with blank target with Locker Service enabled.

for the conditional rendering you can use aura:if

if you want to render always but conditionaly show/hide - u can use css classes with -true/-false naming convention and evaluate the class name in lightning expression.

Answer 3

By opening in a new window, you're violating a fundamental principle of components. Components aren't supposed to have access the Browser Window in the DOM. In order to open a link in a new window, that's the only way you could possibly do that which I'm aware of. I'll add that Salesforce strongly discourages the use of jQuery libraries in Lightning components which could also be part of your issue; particularly that you've not used <lightning:require? on them.

For more on this see https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_dom_access.htm

Answer 4

Just to add, this is working in IE11. Waiting for the Spring 17 to hit my sandbox next month-Jan 2017 for the Chrome fix.