function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Maheshkumar Selvaraj 10Maheshkumar Selvaraj 10 

Stuck in the trailhead module "Create Secure Lightning Components Module"

For the Challenge1 of 'Create Secure Lightning Components Module', I identified 2 vulnerabilities and removed in the code (as shown in screenshot. However, still I am getting the error "The 'LTNG_Secure_Component_Challenge' component is not yet secured. Remember, unescapedHTML is dangerous. ui:outputRichText is a safer alternative.". I have already replaced unescapedHtml tag with ui:outputRichText. Do anyone come across this?

User-added image
Best Answer chosen by Maheshkumar Selvaraj 10
Nayana KNayana K
Try this:
CMP: 
More information: <a href="{!'/'+v.safeCommonMonster}">here</a><BR />
CONTROLLER.JS: 
searchRegionAction : function(component, event, helper) {
        var getRegionAction = component.get("c.getRegionByName");
        getRegionAction.setParams({ regionName : component.find("InputName").get("v.value") });
        getRegionAction.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var region = response.getReturnValue();
                component.set("v.region", region);
                console.log('==region====',region) ;
                //JavaScript: we add a check for only alphanumeric and numeric values 
					var alphaNum = /^[0-9a-zA-Z]+$/; 
                // TODO make this safe 
                if(region.Common_Monster__c.match(alphaNum)) { 
                    component.set('v.safeCommonMonster',region.Common_Monster__c); 
                    } 
               
            }
        });
        $A.enqueueAction(getRegionAction);
	},


 

All Answers

Nayana KNayana K
Try this:
CMP: 
More information: <a href="{!'/'+v.safeCommonMonster}">here</a><BR />
CONTROLLER.JS: 
searchRegionAction : function(component, event, helper) {
        var getRegionAction = component.get("c.getRegionByName");
        getRegionAction.setParams({ regionName : component.find("InputName").get("v.value") });
        getRegionAction.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var region = response.getReturnValue();
                component.set("v.region", region);
                console.log('==region====',region) ;
                //JavaScript: we add a check for only alphanumeric and numeric values 
					var alphaNum = /^[0-9a-zA-Z]+$/; 
                // TODO make this safe 
                if(region.Common_Monster__c.match(alphaNum)) { 
                    component.set('v.safeCommonMonster',region.Common_Monster__c); 
                    } 
               
            }
        });
        $A.enqueueAction(getRegionAction);
	},


 
This was selected as the best answer
Maheshkumar Selvaraj 10Maheshkumar Selvaraj 10
@Nayana K

I tried that code. But still getting the below error.User-added image
Nayana KNayana K
<aura:component implements="force:appHostable" controller="LTNG_Regions_Controller" access="global">
    <aura:attribute name="region" type="Region__c" default="{}" required="false"/>
    <aura:attribute name="creatures" type="Creature__c[]" default="[{}]" required="false" />
    <aura:attribute name="safeCommonMonster" type="String" default="" />
    
    <div class="slds-row slds-align--absolute-center">
        <div class="slds-panel slds-size--4-of-6 ">
            <lightning:input label="Get Region information:" name="InputName" aura:id="InputName" />
            <ui:button label="Search Region" press="{!c.searchRegionAction}"/><BR />
            
            Information For Region:
            <ui:outputText aura:id="retRegionName" value="{!v.region.Name}" /><BR />
            Id: <ui:outputText aura:id="retRegionId" value="{!v.region.Id}" /><BR />
            Description: <ui:outputRichText value="{!v.region.Description__c}" /> <BR />
            <!-- TODO make this link work -->
            More information: <a href="{!'/'+v.safeCommonMonster}">here</a><BR />
            <ui:button label="Show Creatures" press="{!c.getCreaturesForRegionAction}"/><BR />
            
            <aura:iteration items="{!v.creatures}" var="creature">
                Creature: {!creature.Name} <BR />
                Id: {!creature.Id} <br />
                Description: <ui:outputRichText value="{!creature.Description__c}" /> <BR />
                Type: {!creature.Type__c} <br /><br />
            </aura:iteration>
        </div>
    </div>
</aura:component>
  
({
    searchRegionAction : function(component, event, helper) {
        var getRegionAction = component.get("c.getRegionByName");
        getRegionAction.setParams({ regionName : component.find("InputName").get("v.value") });
        getRegionAction.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var region = response.getReturnValue();
                component.set("v.region", region);
                console.log('==region====',region) ;
                //JavaScript: we add a check for only alphanumeric and numeric values 
					var alphaNum = /^[0-9a-zA-Z]+$/; 
                // TODO make this safe 
                if(region.Common_Monster__c.match(alphaNum)) { 
                    component.set('v.safeCommonMonster',region.Common_Monster__c); 
                    } 
               
            }
        });
        $A.enqueueAction(getRegionAction);
	},
    
    getCreaturesForRegionAction : function(component, event, helper) { 
        var getCreaturesAction = component.get("c.getCreaturesForRegion");
        getCreaturesAction.setParams({ regionId : component.get("v.region").Id });
        getCreaturesAction.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var results = response.getReturnValue();
                component.set("v.creatures", results);
            }
        });
        $A.enqueueAction(getCreaturesAction);
	}
})

This is the whole code which I have used and passed the challenge.
Ghanshyam Kumar 9Ghanshyam Kumar 9

You need to do two changes in the component and one change in the controller.
Component

<!-- TODO make this link work -->
More information: <a href="{!'/'+v.safeCommonMonster}">here</a><BR />

Description: <ui:outputRichText value="{!creature.Description__c}" /> <BR />

Controller:

// TODO make this safe 
 var alphaNum = /^[0-9a-zA-Z]+$/;
 if(region.Common_Monster__c.match(alphaNum)) {
           component.set("v.safeCommonMonster",region.Common_Monster__c);
  }
Ankur Mittal15Ankur Mittal15
Hello All,
Need one quick help here. as this challenge can not be completed in standard Developer Edition or Trailhead Playground. We must sign up for a super-special Kingdom Management DE org. I did the signup but not able to Launch KM DE org from trailhead and that is why I am getting "The 'LTNG_Secure_Component_Challenge' component was not found." How did you guys solve the challenge?
Any help would be appreciated.
Arti ShrivastavaArti Shrivastava
When taking the c=hallenge Go to manage orgs instead to choosing trailhead playground . Add your Kingdom Management DE org in it.
Marcelo CamposMarcelo Campos
File > Open Lightning Resources > c:LTNG_Secure_Component_Challenge > COMPONENT and CONTROLLER