Unable to load into an iFrame

App Development
1

Hello,

Im trying to use pepedrive embeeded into my website, for this i use an iFrame but it seems like there is a restriction.

The message i get on the browser console is:

Refused to display ‘https://gocontact2.pipedrive.com/pipeline/1/user/5479537’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

How can i bypass this restriction?

Thanks in advance.

2

I’m afraid that the the ‘X-Frame-Options’ have been added on purpose for security reasons so there’s no way to bypass this.

3

Hi David i have same issue. I want use iframe from my website in pipedrive custom ui.
I got this error Refused to display in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

if i cannot do this why in doc wrote this ?
it is mandatory to use the SDK to initialize the webpage and communicate with the main Pipedrive window.

and about Glitch. it is rendered in iframe but the problem is the next. How i can get query params like selectedIds ?

please watch the code. it is standard code from glitch

const express = require("express");
// Load environment variables. Make sure you fill the .env file
require("dotenv").config();
  
const app = express();
app.use(express.json());
    
app.use(express.static("public"));

**// Try to get query params**
app.get("/", (req, res) => {
      console.log(req.query,'query');
});

// Callback endpoint
  app.get("/callback", async function (req, res) {
  const apiClient = pipedrive.ApiClient.instance;
  let oauth2 = apiClient.authentications.oauth2;
  oauth2.clientId = process.env.CLIENT_ID;
  oauth2.clientSecret = process.env.CLIENT_SECRET;
  oauth2.redirectUri = `https://${process.env.PROJECT_DOMAIN}.glitch.me/callback`;
  
  if (req.query.code) {
    try {
      const token = await apiClient.authorize(req.query.code);
      
      console.log("Successful Auth ✅",req.query);
      
      return res.status(200).redirect("/");
    } catch (error) {
      console.error("Wob, Wob, Wobb 🙁");
      return res.status(500).send(error);
    }
  } else {
    return res.status(400);
  }
});

app.listen(3000, function () {
  const d = process.env.PROJECT_DOMAIN;
  console.log(
    `🟢 App is running \nApp Panel URL: https://${d}.glitch.me/\nCallback URL: https://${d}.glitch.me/callback`
  );
});
4

Hi @Narek_Antabyan,

The header for X-Frame-Options is set on your side and unfortunately, we can’t control these headers. You will have to disable the header if you want your content to be embedded inside the iframe.

For selectedIDs, as explained in the final reply of the other thread that you started, Pipedrive provides the context when the iframe request is made. There is no need to manually add it to the iframe configuration.