How to fix "Does not provide fallback content when JavaScript is not available" in audit in PWA? - angularjs

I have made a angular application and I want to test it in audit but in PWA under audit, i got error in PWA optimized section like
Does not provide fallback content when JavaScript is not available
I have even written <noscript>Please enable javascript</noscript> in index.html file. I have not got this error when i ran audit in localhost by starting http-server but the same thing i am checking on server then it gives red mark in PWA optimized section? How to solve this ?
This is the error:

Usually, Adding the <noscript> block on your page would take care of this... I had gone around this myself on my website
Referring to Google's site (which i visited today after your question, we see the description:
Given these considerations, this Lighthouse audit performs a simple
check to ensure that your page isn't blank when JavaScript is
disabled. How strictly your app adheres to progressive enhancement is
a topic of debate, but there's widespread agreement that all pages
should display at least some information when JavaScript is disabled,
even if the content is just an alert to the user that JavaScript is
required to use the page.
For pages that absolutely must rely on JavaScript, one approach is to
use a element to alert the user that JavaScript is required
for the page. This is better than a blank page, because the blank page
leaves users uncertain about whether there's a problem with the page,
their browsers, or their computers.
I suspect that when you disable javascript via chrome, you might end up with just the text "Please enable javascript"; Try also placing
an image, a backup navigation (which runs in case of no JS only)
a backup footer (which runs in case of no JS only)

Related

Can't edit certain pages on DNN site after upgrade to 9.01.01

We recently upgraded one of our client sites to 09.01.01 to address a Telerik vulnerability, and then had to migrate the site from managed.com to Azure due to manage.com's outage. After the upgrade, a couple of pages on the site have been uneditable using the pencil icon in the persona bar, although the rest work fine. We're aware of the workaround of going into content > pages and clicking the pencil icon there, but even then not all of the areas on the page are editable. For example, there's one instance of the HTML module on the homepage where when you click on its pencil and then click "Edit Content," it just displays a pop-up with the text but no WYSIWYG or way to actually edit. Other instances of the HTML module work fine, on other pages and even other areas of the homepage.
What's more bizarre is that we just spun up another Azure VM and created a dev site from a clone of the live site so we could troubleshoot further, and this problem does NOT occur on that site even though it's an exact copy of the live site files and database and both sites are hosted in Azure.
Does anyone have advice on what might be causing this or how to troubleshoot? My original though was to clone the page and start removing modules one by one to see if anything made a difference, but it doesn't actually remove the module when I click delete. I've read about ways to do this directly in the database, but I'd prefer to avoid that if possible, especially since we're not seeing the same problem on the cloned site.
Thank you!
Could you please see if any error appearing on the logs folder? You can see the logs here. /Portals/_default/logs/2021.02.01.log.resources? The log file name may differ based on website's logging configuration.
A similar thing can be seen from the Personal bar as well using Admin Logs.

How to migrate an online angular script to local server?

Hi I'm trying to make an offline version of this page:
https://u-he.com/tools/microtuning/ the script is writtin with Angular JS how do I do that?
I saved the page control-s and copied the file to the local server I'm running.
And then I browsed the local ip. the page opened but I get repeated notes ng-repeat shows up as multiple boxes instead of 1 box that edits the same note but in different octaves.
How do I solve this problem please.
You can inspect the front-end code in your browser console. In Firefox it's in the section called "Debugger", in Chrome it's called "Sources". If you use Safari, you need to enable Developer mode first.
Once you have the appropriate view, just click on u-he.com -> tools/microtuning/ -> index
Hopefully it goes without saying that you shouldn't use large swaths of another person's code without at least giving appropriate credit, or better yet getting the developer's permission, unless there is an explicit open-source license.

Security with "web_accessible_resources"

MDN docs state:
To enable a web page to contain an <img> element whose src attribute points to this image,
you could specify "web_accessible_resources" like this:
"web_accessible_resources": ["images/my-image.png"]
The file will then be available using a URL like:
moz-extension://<extension-UUID>/images/my-image.png"
<extension-UUID> is not your extension's ID.
It is randomly generated for every browser instance.
This prevents websites from fingerprinting a browser by examining
the extensions it has installed.
So, I would think that these resources cannot be read by any web page outside the extension, since they would need to know the random UUID.
However, the same MDN docs also state:
Note that if you make a page web-accessible, then any website may then link or redirect
to that page. The page should then treat any input (POST data, for examples)
as if it came from an untrusted source, just as a normal web page should.
I don't understand how "any website may then link or redirect to that page". Wouldn't it need to know the random UUID? How else could a webpage access this resource?
The point of Web Accessible Resources is to be able to include them in a web context.
While you can communicate the random UUID to the webpage so that it can use the file, it doesn't have to be included by the website code itself. Here's a hypothetical scenario:
You're writing an extension that adds a button to evil.com site's UI. That button is supposed to have an image on it.
You bundle the image with your extension, but to add it as src or CSS property to the webpage you need to be able to reference it from a web context.
So, you make it web-accessible, and then inject your UI element with a content script.
Perfectly plausible scenario.
Note that a random third-party site villains-united.com can't just scrape the URL to know if your extension is installed, since the URL is per-browser unique. This is the intent behind WebExtensions's UUID over Chrome's extension-id model.
However, let's continue our hypothetical scenario, from a security perspective.
The operators of evil.com are unhappy with your extra UI. They add a script to their code that looks for added buttons.
That script can see the DOM properties of the button, including the address of the image. Now evil.com's code can see your UUID.
Being the good guy, your extension's source code is available somewhere, including the page that launches nuclear missiles if called (why you would have that and why it would be web-accessible is another matter, perhaps to provide the functionality to good-guys-last-resort.org).
evil.com's script now can reconstruct the URL of this trigger page and XHR it, plunging the planet into nuclear apocalypse. Oops. You probably should've checked the origin of that request.
Basically, if a web-accessible resource is used in a page, the UUID likely leaks to that page's context via DOM. That may not be a page you control.

Oracle ADF - Redirect link is not working

I am developing a simple application using ADF comes with basic CRUD operations (create, read, update, delete). In this case, as you can see, I have dragged a link to the 1st column which is highlighted in yellow.
So whenever I deploy it and click that, it is supposed to redirect me to the Edit page where client will allow to make commit:
I did make sure the Action of link is associated with the Edit page (as highlighted in yellow above). However, the link wouldn't redirect me anywhere, no response.This is the unbounded task flow:
Okay so I have found out the solution. Due to the default setting, the application will be deployed on IE and this message will prompt out. As you can see, the message is mentioning about browser's compatibility. My IE is version 11.6, I'm not sure what's the issue here since my IE is kinda latest version but this message still pops out and affects the redirect link from working. However, simply copy the application URL to Google Chrome and run should fix this issue. Hope this helps in future.
If the two pages in the Unbounded Task Flow, then Add WildCard Control Flow Rule
and connect the two pages with the WildCard.
Or you can use the Popup instead of opening a new page for edit

How to reload "index.html" in angularJS without manual intervention?

I have a website developed in AngularJS, and index.html serves the root of the application.
All the JS and CSS versions are maintained in the index.html itself, which means for any changes to reflect to the user, "index.html" is to be reloaded at the browser.(correct me if I am wrong here).
This is a problem, since there could be chances that the user has a tab opened of our website in his browser and we have published a new release. This release will not be published at user's browser till the time a "Manual refresh" is not triggered and "index.html" is not reloaded and hence bring up the possibility that the user will not be using our latest release.
We have written a framework to reload all resources once a release is detected by sending the latest version from web-server and comparing this with the current version in the browser and trigger a reload automatically. This fix works fine, but the problem again is, how to publish this release first time to all user's browser?
I hope you get my problem? let me know otherwise.
This is not possible. There is no way to force an open page to refresh if it does not already have code to implement that feature. You will have to wait until the user refreshes it themselves, and the browser cache expires, and any intermediate caches between the user and your servers.
I recommend searching to learn about "HTTP caching" if you are not already familiar, as well as "cache busting." In general, you may want to consider making index.html a small file that references your big files in <script> tags, setting the cache control for index.html very low, and use cache busting techniques on your big files.
But for your first release, there is no way to invalidate open tabs or existing caches. If this will cause a problem with your server, read up on "API versioning" for different ways to handle it.

Resources