This is a listing I applied for on Upwork but did not meet the client’s desired experience level to win the job. I took it as a practice opportunity. :)

Requirements

Embed an iFrame pointing to an external app
Place the iFrame on the Lightning Home Page / in a custom Lightning Component
Support user authentication via Salesforce SSO or login prompt within the frame
Respects security best practices such as CSP settings and clickjacking protection
Visible only to users on a given profile

Deliverables

Working iFrame component on the given profile’s Home Page
Authentication works smoothly and securely
Documentation on how to update and maintain the component

My Experience

I completed this exercise in a trailhead playground. I wasn’t sure that I had an account for a service compatible with Salesforce SSO, since I’m not in a corporate environment / don’t pay for any enterprise services at this time. So I opted for a login prompt to Google Slides. I opted to implement this for users on the “Custom: Sales Profile” profile available in my trailhead playground.

As a relatively junior developer I first enlisted ChatGPT to guide me through the process and write me some boilerplate code as my starting point. I attempted to create the files in the Developer Console, and quickly learned my first lesson: the Dev Console will only allow you to create aura components, even though the option in File → New is called Lightning Component. So I switched over to Visual Studio Code to get a project set up.

Once I had my initial files set up and pushed to GitHub for version control, I updated the URL to the Google Slides app URL, https://docs.google.com/presentation. Then I went into CSP trusted sites and enabled frame-src on a new trusted site for the domain docs.google.com.

It’s worth noting here that I was unable to restrict the trusted site to only Google Slides due to the nature of google app urls. Only the whole domain can be trusted, not an individual path like /presentation. However, I could specify within the iframe URL itself that I wanted to go directly to Google Slides. So from a UX perspective the solution might be acceptable, but from a security perspective if you only wanted users to be able to access Google Slides, and not, say, Google Sheets, that could be problematic.

Once I was ready to deploy I hit a couple errors. The first was that my new lwc name matched the aura component I had mistakenly started in dev console exactly, so I deleted the aura component. The second was that my class name in the js file did not match my file names exactly (case sensitivity issue). Then, success! Time to add the lwc to the home page to see how it looks!

“This content is blocked.”

Womp womp!

So what happened? Turns out, Google Slides only allows you to embed a read only version of specific decks. You cannot embed the full-featured app into Salesforce (or any site).

How anti-climatic!

Outcome

How very, very sad.

Lessons Learned Summarized

🌸 The external app you are embedding must not block iFrames - if it does, you’re pretty much out of luck. Hacks and workarounds are risky and likely to violate the app’s TOS, hence them blocking iFrame in the first place. Research this critical limitation before starting work.

🌸 LWC must be developed in VS Code when working with developer orgs and trailhead playgrounds.

🌸 A Trusted Site can only accept a full domain, not a path. This can be a potential security concern for services accessed from a shared domain, like the Google Suite.

🌸 An LWC name cannot be an exact match to an existing Aura component.

🌸 The class name in the .js file must be an exact, case-sensitive match to the LWC name.

Reflections

One issue that I had anticipated but didn’t get to explore was potential sizing and scrolling issues. It would have been interesting to see how the app displayed within the iFrame and experiment with ways to improve the appearance if it had defaulted to a less than ideal state.

https://github.com/hawkinssm/iframe-exercise-lwc/

Salesforce LWC: Embedded iFrame