I am trying to embed an AWS Quicksight dashboard into our application but I am having some trouble with the embed process. The URL has been generated correctly and but I get a permission denied error when I attempt to embed it.
I am able to load the generated URL directly in a new tab but when I attempt to embed it I get a 401 error.
I have whitelisted the domain in the Quicksight console and am accessing the page over HTTPS. The complete test page is shown below.
The following code is what I am using to test embedding. It was taken from an Amazon example.
<!DOCTYPE html>
<html>
<head>
<title>My Dashboard</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk/dist/quicksight-embedding-js-sdk.min.js" ></script>
<script type="text/javascript">
function embedDashboard() {
var containerDiv = document.getElementById("dashboardContainer");
var params = {
url: "<link that works in a standalone browser tab>",
container: containerDiv,
parameters: {
},
height: "700px",
width: "1000px"
};
var dashboard = QuickSightEmbedding.embedDashboard(params);
dashboard.on('error', function(err) {console.log('dashboard error:', err)});
dashboard.on('load', function() {});
}
</script>
</head>
<body onload="embedDashboard()">
<div id="dashboardContainer"></div>
</body>
</html>
Amazon sends a 302, followed by a 401. Which results in a frame with the error message "We can't display this page (Not Authorized).
The first request in the image fetches a fresh link from the server and the subsequent two are the framing attempt.
I would expect that if something was wrong with my authorization then a loading the link in it's own tab would not work. I think the issue must be with the frame but don't know what other options to check beyond the whitelist.
Does anyone have any idea what else I can try?
Related
Followed a tutorial and added google analytics to my django site by placeing the tracking code into the head of my base.html as well as a different page that does not extend from base.
<!DOCTYPE html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-trackcode"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-trackcode');
</script>
</head>
However the other day I ran a facebook ad and sent over 200 clicks to my site, google only tracked 30 of these clicks. And when viewing my pages it does not seem to properly track individual pages and only tracked 3 pages, the majority of the traffic is just under the root domain.
(its a blog style site so i need to see exactly what pages users are most interested in)
I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.
However, it is always a hit or a miss:
Out of 10 reloads, one loads the player.
But anytime I make a
change to the <stream> tag, and angular re-compiles, the player is
loaded. After this if I refresh the browser, it is a blank screen
again.
The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:
In the index.html file:
<!doctype html>
<html lang="en">
<head>
...............
</head>
<body>
<app-root></app-root>
</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>
</html>
In the videoFile.component.ts:
<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>
Found a solution here: https://github.com/angular/angular/issues/13965
So everytime the component loads, the script is removed and reattached using ngOninit, like so:
document.getElementById("video_embed").remove();
let testScript = document.createElement("script");
testScript.setAttribute("id", "video_embed");
testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
document.body.appendChild(testScript);
If anyone has any other solutions, please do let me know.
I'm learning to build a API using Amazon Web Services' API Gateway, DynamoDB, and Lambda.
I've been following a video playlist tutorial on Youtube. So far, I've created the desired Lambda Function, DynamoDB Table, and also the API Gateway.
Now all I need to do is build a frontend that display my current items in the table and also the entry.
So far I made it to this part here.
In the video, he uses JavaScript to make an ajax request and fetch the items in the DynamoDB Table. I've written the same ajax request with the html.
<html>
<head>
<h1 style="color:rosybrown;">Latest guestbook entries:</h1>
</head>
<body>
<div id="entries">
</div>
<h1>New Entry</h1>
<form>
<label for="msg">Message</label>
<textarea id="msg"></textarea>
<button id="submitButton">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var API_URL = "someURL/prod/entries";
$(document).ready(function(){
$.ajax({
type: "GET",
url: API_URL,
success: function(data){
$("#entries").html("");
data.Items.forEach(function(guestbookItem){
$("#entries").append("<p>"+guestbookItem+"</p>");
})
}
});
});
</script>
</body>
So here I'm going to explain my purpose. The goal is the display the items in the DynamODB table that I have created while also accepting new entries. It has a date and message item.
The API Gateway has an /entries resource and has two methods, GET and POST. /prod means it was deployed on a production stage.
When invoking the URL for the GET method. I receive this output
"{\"Items\": [{\"date\": 20180512, \"message\": \"this is my 4th message\"}, {\"date\": 20180513, \"message\": \"I love AWS\"}], \"Count\": 2, \"ScannedCount\": 2, \"ResponseMetadata\": {\"RequestId\": \"SOME_REQUEST_ID\", \"HTTPStatusCode\": 200, \"HTTPHeaders\": {\"server\": \"Server\", \"date\": \"Mon, 14 May 2018 20:32:43 GMT\", \"content-type\": \"application/x-amz-json-1.0\", \"content-length\": \"160\", \"connection\": \"keep-alive\", \"x-amzn-requestid\": \"SOME_REQUEST_ID\", \"x-amz-crc32\": \"2401247050\"}, \"RetryAttempts\": 0}}"
However, after running the index.html file on my local host.
The entries did not appear. When I checked the console, it turns out I receive the following error
index.html:33 Uncaught TypeError: Cannot read property 'forEach' of undefined
at Object.success (index.html:33)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)
I was not really sure what is going on. Items does exist in the response. I've been stuck with this for days. If anybody could point out what I was missing, it would be greatly appreciated!
I can't seem to get any sample app working. I'm trying to run a simple websocket 101 starter app that does nothing more than log something to console.
I have cfws directory in my webroot C:\inetpub\wwwroot, and I'm working in C:\inetpub\wwwroot\site\.
I have enabled web sockets in the cfadmin, with "use proxy" option, port 8579.
The code I'm running is:
index.cfm:
<html>
<head>
<title>Example One</title>
<script language="javascript">
function messageHandler(msg) {
console.log("messageHandler Run");
console.dir(msg);
}
</script>
</head>
<body>
<h1>Example One</h1>
</body>
</html>
<cfwebsocket name="myWS" onMessage="messageHandler" subscribeTo="news">
Application.cfc
component {
this.name="cfwack2_1";
this.wschannels = [{name:"news"}];
}
I run the code and there are no errors, but I don't see the expected log in the console.
So far every sample app I've tried does five eighths of nothing. Any help appreciated.
You may have a typo in your Application.cfc. According to the docs here, it should look like this:
component {
this.name="cfwack2_1";
this.wschannels=[{name="news"}];
}
An = (equal sign) instead of a : (colon) after name.
The documentation also shows that the JavaScript function should accept an event and a token value. Here is the example from the documentation.
<script type="text/javascript">
function mymessagehandler(aevent, atoken)
{
var message = ColdFusion.JSON.encode(atoken);
var txt=document.getElementById("myDiv");
txt.innerHTML +=message +"";
}
</script>
<cfwebsocket name="mycfwebsocketobject" onmessage="mymessagehandler" subscribeto="news">
<cfdiv id="myDiv"></cfdiv>
Im trying to implement oauth1 for quickbooks, using a python library requests_oauthlib. My problem is i tried setting up the quickbooks oauth as suggested by quickbooks inserting the quicbooks button.
The sample code provided was:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ipp="">
<head><meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>My Connect Page</title>
<script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.2.js">
</script>
<script type="text/javascript">
intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet'
datasources: {
quickbooks : true,
payments : false
},
paymentOptions:{
intuitReferred : true
}
});
</head>
<body>
<ipp:connectToIntuit></ipp:connectToIntuit>
</body>
</html>
But what it does is, it opens a new pop up like window and goes through the oauth process, but i am not able to figure out, how to get the control back to my app when the redirect happens to the redirect url mentioned, with the access token. Now the redirect url is also opened within the pop up window.
But what it does is, it opens a new pop up like window and goes through the oauth process,
This is expected behavior. This should happen. The entire OAuth process takes place within the pop-up.
Now the redirect url is also opened within the pop up window.
It should be, this is good.
All you have to do is use window.close() to close the pop-up once the OAuth process completes.