Calling a resource from one localhost flask app into another localhost app - python-3.x

I was wondering if its possible to call a localhost url hosted on a flask app from another flask app (also running on localhost but on a different port). I currently have a simple flask app that shows a single image inside its html. The code is the following:
<head>
</head>
<body>
<img src="{{url_for('static', filename='image1.png')}}" alt="Image 1" height="100" width="100" />
</body>
</html>
I run it on localhost:5001 and it runs absolutely fine. That is I see a single image inside the browser.
Once I get this running within a browser, I open a second app that references this url in the form:
<img src="http://localhost:5001/"/>
inside index.html. This app is then run on localhost:5000
However, the image inside the second app doesn't show, even though I can see the domain for the image running just fine when I load localhost:5001 inside the browser. I understand I could do this simply within one app if I just wanted to show the image (by having the image resources inside one app), but I need to do something like this to test the certificates for separate domains, each one hosting a different image.
I was wondering is something like this possible. If so, what would be the best way to approach it, and if the way I am doing is not correct?
Thanks!

<img src="http://localhost:5001/"/>
The above is invalid, because you're loading the root of that page which returns the HTML.
You ought to reference it as something like:
<img src='http://localhost:5001/static/image1.png' />
If this doesn't work then load up the working image again, and right click to view in a new tab, noting the correct URL and substitute it here.

Related

Express combining two directories and changing the path

So I'm making an app with nodejs, express, and angularjs. I was following a couple of tutorials and decided to integrate into my project.
I have a index.html and there there is a button to create a multi-step form using Angularjs and UI-route. Form link
Then I found a youtube playlist for MEAN Stack, server works fine. As everyone I routed /public also.
app.use(express.static(__dirname + '/public'));
The problem starts here,
Button in the index.html it supposly goes to /app/views/forms/main-form.html to create the ui-view.
<div class="btn">
<form action="/app/views/forms/main-form.html">
<input type="submit" value="Get Started" />
</form>
</div>
Before I integrated express into my project, the path was working fine. Somehow, I think something to do with Express, when I click I get the following 404 error.
Refused to apply style from 'http://localhost:8080/app/views/forms/assets/css/form.css'
because its MIME type ('text/html') is not a supported stylesheet MIME type, and
strict MIME checking is enabled.
My problem is not about being a MIME type. The original path to CSS is /assets/css/form.css, but somehow it takes the form-main.html path at the beginning which is /app/views/forms also.
It is the same with formController as well. The controller normally is in the path of /app/controllers/formCtrl.js but the error goes like /app/views/forms/app/controllers/formCtrl.js
I would like to know how it takes two directories and combines them and why?
Edit
After using the CDN of Angularjs instead of local lib, it can get the link directly. But combining two directories is still continue to happening.

Adding ReactJS to a project without npm start

There is a ready-made project. Backend on Yii2, the frontend is written in it. Please tell me how to add a piece of the front on ReactJS to the finished page, so that, for example, in OpenServer, when you launch the site(my project), ReactJS is displayed correctly (without using npm in the console).
In other words, how to connect ReactJS to a project?
You can make a build out of it using npm run build
and then from it you can link index.html
Add React in One Minute
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
There will be no complicated tools or install requirements — to complete this section, you only need an internet connection, and a minute of your time.
Step 1: Add a DOM Container to the HTML
First, open the HTML page you want to edit. Add an empty tag to mark the spot where you want to display something with React. For example:
<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->
Step 2: Add the Script Tags
Next, add three tags to the HTML page right before the closing tag:
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
enter link description here

Azure App Service on Linux plan encoding issue

I deployed a node app "typically prerender server" to two different places and tested prerender with a get request to a url contains Arabic letters
1. Heruko: working perfectly
2. Azure App Service on linux plan failed with HTTP Error 400. The request URL is invalid.
here is the respond body from Postsman
<html>
<head>
<title>Bad Request</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<style type="text/css">.cf-hidden { display: none; } .cf-invisible { visibility: hidden; }</style>
</head>
<body>
<h2>Bad Request - Invalid URL</h2>
<hr>
<p>HTTP Error 400. The request URL is invalid.</p>
</body>
</html>
Notice that the response head/meta contains charset=us-ascii
here is how the prerender node app see part of the url
u008aÙ\u0088Ù\u0085_Ù\u0085Ù\u0083رÙ\u0088Ù\u0086ع
i even created a node docker image to set language and locale to en_US.UTF-8 and changed Azure App to use this Docker image but still get error.
Any help please ?!
Unfortunately, after some investigation, I still don't understand why this issue occurred.
Actually App Service on Linux are still in Preview and not in Production yet. In this case, I would suggest you use an alternative offering, like Cloud Service or VM instead.
I have also tried to create prerender server on an Azure Linux Virtual Machine (Ubuntu Server 16.04 LTS), and it worked well.

How to run content script code on an HTML file locally hosted by Google Chrome Extension? [duplicate]

I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}

"https://fls.doubleclick.net" tracking downloads "http://www.googleadservices.com/pagead/conversion.js"

I had this Google floodlight code on a secure page in one of the websites I maintain. This content is inside and iframe which in turn is inside :
<script type="text/javascript">
document.write ('<IFRAME src="https://fls.doubleclick.net/activityi;src=XXXXX;type=12312;cat=084;qty=1;cost=$iTotal;?" width="1" height="1" frameborder="1" style="display:none"
</IFRAME>')
</script>
recently IE issued a message stating the page has insecure content. Inspecting the page with fiddler I can see that now the Google server that receives the floodlights also sends back a javascript library:
"http://www.googleadservices.com/pagead/conversion.js"
which is causing the insecure content message.
Has this happened to you too? Any idea how to fix it?
I found a tag I didn't knew on doubleclick:
<img src="https://gan.doubleclick.net/gan_conversion?advid=K123456&oid=12345&amt=123.45" width=1 height=1>
but It's not very clear if it does the same thing.
Ideas?
In the corrosponding Google Floodlight activity, you'll want to check the box that says "Secure Servers Only (https)".

Resources