Good afternoon everyone. I am working to embed reports in our application with the report service provider of Domo. I have created the following component.
import React from 'react';
const generateFormHtml = (actionUrl, embedToken) => (
`
<!DOCTYPE html>
<html>
<body>
<form id="embedForm" action="${actionUrl}" method="post">
<input type="hidden" name="embedToken" value="${embedToken}" />
</form>
<script>
document.getElementById("embedForm").submit();
</script>
</body>
</html>
`
);
const generateDataUri = (html) => `data:text/html;charset=utf-8,${encodeURI(html)}`;
const ReportEmbedder = ({ actionUrl, embedToken }) => {
const htmlContent = generateFormHtml(actionUrl, embedToken);
const formDataUri = generateDataUri(htmlContent);
return (
<iframe
className="panel embed-panel"
src={formDataUri}
title="Embedded Form"
allowtransparency="false"
/>
);
};
export default ReportEmbedder;
That component is being called inside the main page inside the html
/// actionUrl = 'https://public.domo.com/embed/pages/XXXXX'
/// embedToken = 'full_length_embed_token'
<div className="panel-container">
<ReportEmbedder
actionUrl={actionUrl}
embedToken={embedToken}
/>
</div>
My problem is that when the form renders, it seems to be converting the https url to http with a port associated.
HTTP ERROR 403 Access Denied
URI: http://public.domo.com:443/embed/pages/XXXXXX
STATUS: 403
MESSAGE: Access Denied
Does anyone have any idea how this could be happening or where to look? I have a feeling it is just a configuration issue that I have overlooked but I have yet to find it.
I have worked with debugging to ensure that the URI states https through the entire process. I have confirmed that in the generateDataUri step, the encoding is not over-riding the https setting. I have had a few other engineers peer review but they have been just as confused as myself.
I am expecting the https link to continue so that the iframe loads the report from the endpoint.