function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
MedhanieHabteMedhanieHabte 

Prevent XSS is Force.com Application

Greetings, I am working on the Prevent XSS in Force.Com Applications Trailhead, so far I've gotten most of the sections cleared. However, I seem to be stuck with this one. I've attempted many ways to assign JSENCODE, HTMLENCODE and JSINHTMLENCODE where needed but seem to stuck, are there any steps I should take here. My code's below. Hope it helps!
 
<apex:page controller="XSS_Mitigations_Challenge" sidebar="false" tabStyle="XSS_Mitigations_Challenge__tab">
<apex:sectionHeader title="XSS Mitigations Challenge" />
<apex:form >
    <apex:pageBlock >
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">
            <c:codeLink type="Visualforce" namespace="" edit="true" name="XSS_Mitigations_Challenge" description="Edit this Visualforce page to perform the challenge."/>
            
            
            <apex:outputText value="{!JSENCODE(sampleMergeField1)}"/>


            <apex:outputText value="{!HTMLENCODE(sampleMergeField2)}" escape="false"/>


            <apex:outputText >
                {!sampleMergeField3}
            </apex:outputText>
       
       
            <script>
                document.write('{!JSENCODE(sampleMergeField4)}');
            </script>
             
            
            {!sampleMergeField5}
            
            
            <script>
                var x = '{!JSENCODE(sampleMergeField6)}';
            </script>
            
            
            <apex:outputLabel value="{!sampleMergeField7}" escape="false"/>
                     

        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="" name="XSS_Mitigations_Challenge" description="Visualforce Page"/></li>            
                    <li><c:codeLink type="Apex" namespace="" name="XSS_Mitigations_Challenge" description="Apex Controller"/></li>
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>

 
Best Answer chosen by MedhanieHabte
Parker EdelmannParker Edelmann
Hello @MedhanieHabte5,

As much as I'd like to give you an answer, it appears that I'm just as stuck as you are on this module. Here's my code if it'll help you or the solver of this problem:
<apex:page controller="XSS_Mitigations_Challenge" sidebar="false" tabStyle="XSS_Mitigations_Challenge__tab">
<apex:sectionHeader title="XSS Mitigations Challenge" />
<apex:form >
    <apex:pageBlock >
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">
            <c:codeLink type="Visualforce" namespace="" edit="true" name="XSS_Mitigations_Challenge" description="Edit this Visualforce page to perform the challenge."/>
            
            
            <apex:outputText value="{!sampleMergeField1}"/>


            <apex:outputText value="{!HTMLENCODE(sampleMergeField2)}" escape="false"/>


            <apex:outputText >
                {!sampleMergeField3}
            </apex:outputText>
       
       
            <script>
                document.write('{!JSENCODE(sampleMergeField4)}');
            </script>
             
            
            {!HTMLENCODE(sampleMergeField5)}
            
            
            <script>
                var x = '{!JSENCODE(sampleMergeField6)}';
            </script>
            
            
            <apex:outputLabel value="{!HTMLENCODE(sampleMergeField7)}" escape="false"/>
                     

        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="" name="XSS_Mitigations_Challenge" description="Visualforce Page"/></li>            
                    <li><c:codeLink type="Apex" namespace="" name="XSS_Mitigations_Challenge" description="Apex Controller"/></li>
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>

My rationale behind what I've done:
  1. Does not appear to be susceptible to JavaScript attacks, and escape="true", so I left it alone.
  2. Again, it doesn not appear to be susceptible to JS, but escape="false", so I used HTMLENCODE().
  3. Not sure on this one, so I left it alone.
  4. It's inbetween script tags, so I used JSENCODE() to prevent JS attacks.
  5. I tried this both with and without HTMENCODE(). No luck. I'm not sure why it would need it though...
  6. Again, it's inbetween script tags, so I used JSENCODE().
  7. escape="false", so it needs HTMLENCODE()
There's my two cents, which, in this case, doesn't do me a whole lot of good.

Best Regards,
Parker

All Answers

Parker EdelmannParker Edelmann
Hello @MedhanieHabte5,

As much as I'd like to give you an answer, it appears that I'm just as stuck as you are on this module. Here's my code if it'll help you or the solver of this problem:
<apex:page controller="XSS_Mitigations_Challenge" sidebar="false" tabStyle="XSS_Mitigations_Challenge__tab">
<apex:sectionHeader title="XSS Mitigations Challenge" />
<apex:form >
    <apex:pageBlock >
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">
            <c:codeLink type="Visualforce" namespace="" edit="true" name="XSS_Mitigations_Challenge" description="Edit this Visualforce page to perform the challenge."/>
            
            
            <apex:outputText value="{!sampleMergeField1}"/>


            <apex:outputText value="{!HTMLENCODE(sampleMergeField2)}" escape="false"/>


            <apex:outputText >
                {!sampleMergeField3}
            </apex:outputText>
       
       
            <script>
                document.write('{!JSENCODE(sampleMergeField4)}');
            </script>
             
            
            {!HTMLENCODE(sampleMergeField5)}
            
            
            <script>
                var x = '{!JSENCODE(sampleMergeField6)}';
            </script>
            
            
            <apex:outputLabel value="{!HTMLENCODE(sampleMergeField7)}" escape="false"/>
                     

        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="" name="XSS_Mitigations_Challenge" description="Visualforce Page"/></li>            
                    <li><c:codeLink type="Apex" namespace="" name="XSS_Mitigations_Challenge" description="Apex Controller"/></li>
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>

My rationale behind what I've done:
  1. Does not appear to be susceptible to JavaScript attacks, and escape="true", so I left it alone.
  2. Again, it doesn not appear to be susceptible to JS, but escape="false", so I used HTMLENCODE().
  3. Not sure on this one, so I left it alone.
  4. It's inbetween script tags, so I used JSENCODE() to prevent JS attacks.
  5. I tried this both with and without HTMENCODE(). No luck. I'm not sure why it would need it though...
  6. Again, it's inbetween script tags, so I used JSENCODE().
  7. escape="false", so it needs HTMLENCODE()
There's my two cents, which, in this case, doesn't do me a whole lot of good.

Best Regards,
Parker
This was selected as the best answer
MedhanieHabteMedhanieHabte
The only thing I would do here is invoke JSINHTMLENCODE on field 4, as opposed to just JSENCODE. Sample Field 5 doesn't require anything so it can be left as is (meaning no encoding required). Everything else looks good. I've worked with this before in some code, but certainly of all the trailheads, this one is probably the trickiest one of them all.
MedhanieHabteMedhanieHabte
Here's what the final product looks like.
 
<apex:page controller="XSS_Mitigations_Challenge" sidebar="false" tabStyle="XSS_Mitigations_Challenge__tab">
<apex:sectionHeader title="XSS Mitigations Challenge" />
<apex:form >
    <apex:pageBlock >
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">
            <c:codeLink type="Visualforce" namespace="" edit="true" name="XSS_Mitigations_Challenge" description="Edit this Visualforce page to perform the challenge."/>
            
            
            <apex:outputText value="{!sampleMergeField1}"/>


            <apex:outputText value="{!HTMLENCODE(sampleMergeField2)}" escape="false"/>


            <apex:outputText >
                {!sampleMergeField3}
            </apex:outputText>
       
       
            <script>
                document.write('{!JSINHTMLENCODE(sampleMergeField4)}');
            </script>
             
            
            {!sampleMergeField5}
            
            
            <script>
                var x = '{!JSENCODE(sampleMergeField6)}';
            </script>
            
            
            <apex:outputLabel value="{!HTMLENCODE(sampleMergeField7)}" escape="false"/>
                     

        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="" name="XSS_Mitigations_Challenge" description="Visualforce Page"/></li>            
                    <li><c:codeLink type="Apex" namespace="" name="XSS_Mitigations_Challenge" description="Apex Controller"/></li>
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>

 
Parker EdelmannParker Edelmann
It's not the trickiest of them all, I'd give that title to the Reports and Dashboards Superbadge before they updated it to what it is now - it was virtually impossible!

It works! Thank you for posting the correct code. I'm not a developer, so my only question is why does #4 need JSINHTMLENCODE() instead of just JSENCODE()? Is there something about "document.write()" that requires that?

Thanks again,
Parker
MedhanieHabteMedhanieHabte
Oh yeah, the Superbadges were a biggest beast in an of themselves, I'm still stuck with the APEX Specalist, but have two more to go. The other three I was able to clear with minimal support, though I had to read through some of the instructions in the community and past trailheads. I think its because this JavaScript is being displayed in HTML code, so we want to encode text and merge fields in JavaScript within HTML. JSENCODE(HTMLENCODE might work, but JSINHTMLENCODE is simpler. I too am not a developer just yet, but am learning.
Parker EdelmannParker Edelmann
I've done the Reports and Dashboards Superbadge and the LEX Superbadge so far. I took a look at the Security one, but it didn't seem too detailed so I decided to put that one on the long-term "to-do list". I don't think I dare attempt the Apex Superbadge (I haven't even unlocked it yet). That explanation of why JSINHTMLENCODE() is necessary makes sense. I'm not sure if I'll ever become a developer, but I am somewhat interested in learning code.
MedhanieHabteMedhanieHabte
Have you checked out SFDC99.com or Dan Appelman's course of Pluralsight? I didn't know anything about Apex until I started coming accross those sites and it's really eye opening as far as developing an understanding of Apex. There are a few other places too but they've really changed my way of thinking about code. They've dispelled the belief that being a developer is impossible. We'll get there somehow.
Parker EdelmannParker Edelmann
I've heard of sfdc99.com, and I've even read a couple of less technical articles, but I haven't gotten too in-depth, nor have I heard of Dan Appleman's Pluralsight course. If I put enough time into it, and a lot of effort, it seems reasonable enough that I could become a half-decent developer in JavaScript, HTML, and/or Apex. For the most part, I understand things like for loops, conditionals, and what a class is, but I'm not able as of right now to understand the nitty-gritty details of code, and especially how to write it. Impossible? No. Tricky? Yes. Hard work? Definitely, but I'm sure that anyone can learn it, they just have to have a logical mindset and enough discipline.
Mukesh Kumar 107Mukesh Kumar 107
This worked for me. Somehow, this answer is different from best answer chosen above, which I think is not correct with the logic of encoding.
 
<apex:page controller="XSS_Mitigations_Challenge" sidebar="false" tabStyle="XSS_Mitigations_Challenge__tab">
<apex:sectionHeader title="XSS Mitigations Challenge" />
<apex:form >
    <apex:pageBlock >
        <c:Classic_Error />
        <apex:pageMessages />      
        <apex:pageBlockSection title="Demo" columns="1" id="tableBlock">
            <c:codeLink type="Visualforce" namespace="" edit="true" name="XSS_Mitigations_Challenge" description="Edit this Visualforce page to perform the challenge."/>
            
            
            <apex:outputText value="{!sampleMergeField1}"/>


            <apex:outputText value="{!HTMLENCODE(sampleMergeField2)}" escape="false"/>


            <apex:outputText >
                {!sampleMergeField3}
            </apex:outputText>
       
       
            <script>
                document.write('{!JSINHTMLENCODE(sampleMergeField4)}');
            </script>
             
            
            {!sampleMergeField5}
            
            
            <script>
                var x = '{!JSENCODE(sampleMergeField6)}';
            </script>
            
            
            <apex:outputLabel value="{!HTMLENCODE(sampleMergeField7)}" escape="false"/>
                     

        </apex:pageBlockSection>
        <apex:pageBlockSection title="Code links" columns="1">
            <apex:outputPanel >
                <ul>
                    <li><c:codeLink type="Visualforce" namespace="security_thail" name="XSS_Mitigations_Challenge" description="Visualforce Page"/></li>            
                    <li><c:codeLink type="Apex" namespace="security_thail" name="XSS_Mitigations_Challenge" description="Apex Controller"/></li>
                </ul>
            </apex:outputPanel>        
        </apex:pageBlockSection>        
    </apex:pageBlock>          
</apex:form>              
</apex:page>



 
Christopher D. EmersonChristopher D. Emerson
This was ridiculously picky. I was basically right on but it didn't work until I literally pasted in Mukesh's xml.
Umesh Ramaswamy 29Umesh Ramaswamy 29
<apex:page controller="XSS_Mitigations_Challenge" sidebar="false" tabStyle="XSS_Mitigations_Challenge__tab"> <apex:sectionHeader title="XSS Mitigations Challenge" /> <apex:form > <apex:pageBlock > <c:Classic_Error /> <apex:pageMessages /> <apex:pageBlockSection title="Demo" columns="1" id="tableBlock"> <c:codeLink type="Visualforce" namespace="" edit="true" name="XSS_Mitigations_Challenge" description="Edit this Visualforce page to perform the challenge."/> <apex:outputText value="{!sampleMergeField1}"/> <apex:outputText value="{!HTMLENCODE(sampleMergeField2)}" escape="false"/> <apex:outputText > {!sampleMergeField3} </apex:outputText> <script> document.write('{!JSINHTMLENCODE(sampleMergeField4)}'); </script> {!sampleMergeField5} <script> var x = '{!JSENCODE(sampleMergeField6)}'; </script> <apex:outputLabel value="{!HTMLENCODE(sampleMergeField7)}" escape="false"/> </apex:pageBlockSection> <apex:pageBlockSection title="Code links" columns="1"> <apex:outputPanel > <ul> <li><c:codeLink type="Visualforce" namespace="security_thail" name="XSS_Mitigations_Challenge" description="Visualforce Page"/></li> <li><c:codeLink type="Apex" namespace="security_thail" name="XSS_Mitigations_Challenge" description="Apex Controller"/></li> </ul> </apex:outputPanel> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>

This worked for me, which is same as 
@MedhanieHabte post.
Also when I was testing, I just logged out of the Developer org, and then asked trailhead to check the challenge.