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
logan-trailblazerlogan-trailblazer 

Public LEX Community Page when exposed via iframe on external website cannot set/read cookies

I have an external website (non-Salesforce domain) where one of its page is exposing a Salesforce LEX public community page via iframe.

The community's setting "Clickjack Protection Level" is set to "Allow framing by any page", so the iframe response header "X-FRAME-OPTIONS" is set to "ALLOWALL".

The Salesforce public community page has an aura component that triggers a Salesforce flow.

This works fine in IE, but in Chrome because of the recent security change (SameSite by default cookies) it seems that cookie access (set or read) is disabled.

The iframe tag is ommiting the sandox attribute and in chrome after loading it throws the technical error:

"Please enable cookies in your browser to display this site."

The Salesforce standard cookie check is failing:

"
document.cookie = "cookieTest=x";
var cookieEnabled = document.cookie.indexOf("cookieTest=") != -1; document.cookie = "cookieTest=x; expires=Thu, 01-Jan-1970 00:00:01 GMT;";
if (!cookieEnabled) {
........ display error message to user
"
Has anyone faced the same issue or would know how to avoid this error message in chrome without changing the browser settings?

PS: I don't need any cross-origin cookie from the external website (exposing the community page via iframe)
Additionally, iframe would not be my first option but is an approach that was already agreed before I got involved and before changing approach I will have to discuss with the other party involved.

Thank you in advance



 
max999max999
Hi There,

Yes I'm also facing the same issue, We were using community inside the iframe with different domain. But I've fixed it. Please let me know if you are stil facing the issue.

Thanks
Maksud
Ryan DevelopmentRyan Development
Hi Maksud Ali 11, what did you end up adding to fix? Regards
Shalom HayunShalom Hayun
Yes, @Maksud Ali 11, what was your solution?
max999max999
Shalom Hayun / Ryan Development, 
As you know that SF is adding the popup when it finds that cookie is accessible or not based on the following code.

document.cookie = "cookieTest=x";
var cookieEnabled = document.cookie.indexOf("cookieTest=") != -1;
document.cookie = "cookieTest=x; expires=Thu, 01-Jan-1970 00:00:01 GMT;";
                
if (!cookieEnabled) {
                var cookieMessage = document.createElement("div");
                cookieMessage.innerHTML = "<section role='alertdialog' tabindex='-1' aria-labelledby='prompt-heading-id' aria-describedby='prompt-message-wrapper'         class='slds-modal slds-fade-in-open slds-modal_prompt' aria-modal='true' style='color: rgb(62, 62, 60);'>   <div class='slds-modal__container'>       <header class='slds-modal__header slds-theme_info slds-theme_alert-texture'>           <h2 class='slds-text-heading_medium' id='prompt-heading-id'>{0}</h2>       </header>       <div class='slds-modal__content slds-p-around_medium' id='prompt-message-wrapper'>           <p>{1}</p>       </div>   </div></section><div class='slds-backdrop slds-backdrop_open'></div>".replace("{0}", "Technical Stuff").replace("{1}", "To view this site, enable cookies in your browser.");
                document.body.appendChild(cookieMessage);
}

What I did, I added following JS code on HeadMarkup in community.

<script type="text/javascript">
    (function(){
        setTimeout(function(){
            document.cookie = "cookieTestNew=x;SameSite=Lax;";
            var cookieEnabled = document.cookie.indexOf("cookieTestNew=") != -1;
            if(cookieEnabled){
                //Remove Popup
                if(document.getElementsByTagName("section").length > 0){
                 let errorPopupHTML = document.getElementsByTagName("section")[0].innerHTML.toLowerCase();
                    if(errorPopupHTML.indexOf('prompt-heading-id') > -1){
                        //Error popup has been added to page. Remove it.
                        let parentSection = document.getElementsByTagName("section")[0].parentNode;
                        parentSection.style.display = "none";
                    }   
                }
            }
        }, 150);
    }());
    </script>

SF has not added SameSite flag thats why its getting disbaled cookie and thus popup is been added to top of the page. As per my code. I also created a temp cookie with samesite attribute, after that I've checked a condition and if its match then I remove the SF popup.

Please like my answer if it is helpful for you.
Brent MellowBrent Mellow
I'm having same problem. iFraming community page in a website.

Getting error: To view this site, enable cookies in your browser.

Works fine in Safari and Firefox, but not in Chrome (on Mac).
Dipendra Dadhich 1Dipendra Dadhich 1

Hey @max999

I am also getting this error and Í am implement that which you shared.

Is there any other solution do you have

here is my code:-

 

<link rel="shortcut icon" href="/nventschroffuserportal/s/sfsites/c/resource/favicons/favicon.ico" />
<link href="/sfsites/c/resource/nventIcons/style.css?v=5" type="text/css" rel="stylesheet">

<style>
    .siteforceContentArea .salesforceIdentityLoginForm2 .inverseTextColor{
        color: #3582b8;
    }
    .siteforceContentArea .salesforceIdentityLoginForm2 .inverseTextColor:hover{
        color: #3582b8;
        text-decoration: underline;
    }
</style>
<script type="text/javascript">
    (function(){
        setTimeout(function(){
            document.cookie = "cookieTestNew=x;SameSite=Lax;";
            var cookieEnabled = document.cookie.indexOf("cookieTestNew=") != -1;
            if(cookieEnabled){
                //Remove Popup
                if(document.getElementsByTagName("section").length > 0){
                 let errorPopupHTML = document.getElementsByTagName("section")[0].innerHTML.toLowerCase();
                    if(errorPopupHTML.indexOf('prompt-heading-id') > -1){
                        //Error popup has been added to page. Remove it.
                        let parentSection = document.getElementsByTagName("section")[0].parentNode;
                        parentSection.style.display = "none";
                    }   
                }
            }
        }, 150);
    }());
    </script>
PwC 2PwC 2
@max99

I have added the code you suggest in head markup but it is still not working. Could you please advise? Thanks.
Roger HenzeRoger Henze

Same problem here...

The JS code in the HeadMarkup as proposed by @max999 did not work for me :-(

Manuel Tejeiro Del RíoManuel Tejeiro Del Río
Hi guys,

This is my code. It closes the modal popup after the page is loaded. It does the trick for me. Hope it helps you.

<script type="text/javascript">
    
    function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}    
    
    docReady(function() {
        document.getElementsByTagName("section")[0].parentNode.remove();
    });
   
</script>

BTW, there is a new Community Template (LWR) that seems to not respect the  CSP policies. Even you tell that you want to allow iframes from any external site, it doesn't work. I had to change to the old blank template.

Cheers
 
pritam gugale 1pritam gugale 1
Hi Guys,
I am facing the same issue in Chrome Browser. Please help
Thanks