I have been tasked with integrating a graphical widget into a React component for a project I am working on. The widget_api code provided by RIPE Stat is required to accomplish this. Previously, in HTML5, the integration was successful using the following code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget</title>
</head>
<body>
<script src="https://stat.ripe.net/widgets/widget_api.js"></script>
<div class="statwdgtauto">
<script>
ripestat.init("rir-geo",{"resource":"80.12.67.0/24"},null,{"size":"500","disable":["controls"]})
</script>
</div>
</body>
</html>
During my research, I came across the react-safe library which offers a solution for integrating the widget in React. Here is an example of how it can be achieved in a React index file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>MyWHOIS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="bd-home">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./js/polyfill.js" defer ></script>
<script src="https://stat.ripe.net/widgets/widget_api.js" async></script>
</body>
</html>
Furthermore, I have created a component specifically for embedding the widget:
import React, { Component } from 'react';
import Safe from "react-safe";
export default class EmbedComponent extends Component {
constructor(props){
super();
}
render() {
const params1 = {"family":4,"warnings":1,"delegated":1,"resource":"FR"};
const params2 ={"resource":"127.0.0.1/24"};
const control = {"size":"500","disable":["controls"]};
return (
<div>
<h4>Include Embed</h4>
<div className="statwdgtauto">
<Safe.script>
{`ripestat.init("rpki-by-country",${params1},null,${control})`}
</Safe.script>
<Safe.script>
{`ripestat.init("rir-geo",${params2},null,${control})`}
</Safe.script>
</div>
</div>
)
}
}
When attempting to include the file asynchronously or deferred, I encountered CORS errors. These are the issues I faced:
A parser-blocking, cross site (i.e. different eTLD+1) script, , is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See for more details.
Additionally, without defer or async, attempts to write into the document failed:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. widget_api.js:90