Potential solution for the new API
Over the past few years, many in the programming community have expressed remorse over the departure of the old API, which could be accessed legally from Khan Academy's HTML editor. Now, thanks to the new Go-powered API, fetching a program's discussion posts or a user's scratchpads is simply not possible.
Before, fetches could only be made using "JSONP" request, where the user would create a "script" tag with a special addition to the URL that would pass the API data to a JavaScript function. This was so because the domain "www.khanacademy.org" is blocked by the live editor.
<script>
function handleAPI (data) {
// Do stuff with the API data
}
</script>
<script src = "https://www.khanacademy.org/api/internal/user/scratchpads?username=hsstudent16&callback=handleAPI"></script>
With the new API, however, a "POST" request is needed to send a Go query to the backend. A script tag simply will not suffice for this.
But there may be another way.
Modern Browsers now support "Web Workers," which work as isolated scripts that can be imported from any valid domain (like www.kasandbox.org) that complies with the document's same-origin rules. The upside is that Web Workers do not inherit the same-origin rules as the document that makes them. This means that a "POST" fetch to the new API could successfully be made from a Worker script sourced on the www.kasandbox.org domain.
There is no security concern that I can see, since the script will be created and maintained only by the KA developers, and the only communication to and from the worker exists through a "postMessage" system.
This is my petition:
Create a simple (or not :P) API script on the kasandbox domain that programmers can import into their webpage and use. This is my idea, but of course implementations may differ:
<script>
// Get the API worker
var worker = new Worker("https://www.kasandbox.org/api-fetch.js");
// A small function to manage requests
function getScratchpads () {
// Use a promise for async calls
return new Promise(function (resolve, reject) {
// Request scratchpad data
worker.postMessage({
action: "user-scratchpads",
username: "hsstudent16",
count: 10,
sort: "recent"
});
// Wait for a response
worker.onmessage = (event) => resolve(event.data);
});
}
// Load 10 projects, then print the data to the console.
getScratchpads.then(console.log);
</script>
Please sign in to leave a comment.