5

I am trying to use reCapatcha in LWC using iframe, it works fine on the lightning record page, however the same component I am using on an external website using lightning out. The iframe is refuse to connect as it says it violates CSP policy. I have added the URL to CSP also, but still, I facing the issue. Am I missing anything here?

HTML:

<template>
<div class="iframe-container" lwc:dom="manual"></div>
    <template if:true={loading}>
        <lightning-spinner variant="brand" size="large" ></lightning-spinner>
    </template>
 </template>

JS:

import { LightningElement, track, api } from 'lwc';
import pageUrl from '@salesforce/resourceUrl/recaptchaV2';

export default class RegisterCmp extends LightningElement {
    

    
    loading = false;

    @track navigateTo;
    hasRendered = true;
    constructor(){
        super();
        this.navigateTo = pageUrl;
        window.addEventListener("message", this.listenForMessage);//add event listener for message that we post in our recaptchaV2 static resource html file.
    }
 
    captchaLoaded(event){
        if(event.target.getAttribute('src') == pageUrl){
            console.log('Google reCAPTCHA is loaded.');
        } 
    }
 
    listenForMessage(message){
        console.log('message data : ' + message.data);//message.data - The object passed from the other window.
        console.log('message origin : ' + message.origin);//message.origin - The origin of the window that sent the message at the time postMessage was called.
    }

   
    /**
     * create iFrame and add to DOM
     */
    renderedCallback() {
        if (this.hasRendered) {
            const spinnerContainer = this.template.querySelector('.slds-spinner_container');
            const containerElem = this.template.querySelector('.iframe-container');
            const iframe = document.createElement('iframe');

            // onload() before setting 'src'
            iframe.onload = function () {
                console.log('iframe is loaded');
                spinnerContainer.classList.add("slds-hide"); // hide spinner
            };
            iframe.src = this.navigateTo; // iFrame src; add this URL to CSP
            iframe.id = 'iframe-1';
            iframe.width = '100%';
            iframe.setAttribute('frameborder', '0');

            containerElem.appendChild(iframe); // add iFrame to DOM
        }
    }

    connectedCallback() {
        this.showUserName = false;  
        this.loading = true;     
    }
}

Working on Lightning Record Page:

enter image description here

Not working on Website(LightningOut)

enter image description here

CSP:

enter image description here

3
  • Do you have Enable clickjack protection for customer Visualforce pages enabled? Have you added any trusted domains to your Session Settings to allow iframes on trusted external domains? Mar 10, 2022 at 21:09
  • @Ajay You might want to check this article if it helps even though it talks about reCAPTCHA in community Implementing reCAPTCHA in Experience Cloud
    – Shamina
    Mar 11, 2022 at 7:46
  • I am encountering the same issue with relation to github.com/clifford-fra/GoogleRecaptchav2. The issue we are encountering is likely related to the further information section in the readme. "It's possible to host the HTML file of the static resource somewhere else. This is recommended if you use Lightning Out, because X-Frame-Options will not allow you to embed the static resource directly in an external page. If you do so, then you have to change the src tag in the aura component. You also have to add the iFrame URL to the CSP Trusted Sites in Salesforce Setup....."
    – Gabriel M
    Sep 29, 2022 at 23:56

0

You must log in to answer this question.

Browse other questions tagged .