Chrome: Notifications not working, permission not requested - javascript

I have been struggling for hours on trying to enable notifications on chrome, on firefox it works perfectly and it works ok as well on localhost url address. But when it comes to non-localhost url address it just doesn't work.
i have been checking on the permissions that are displayed left next to the url input box where you see the website's information and it shows that notifications are permitted, but on advanced settings it shows block with a message "Blocked to protect your privacy" and i am not entirely sure what does that mean.
the code i am trying to execute first is simple:
if(Notifications.permission == "default"){
Notification.requestPermission()
.then(permission => {
console.log(`Permission given is: ${permission}`);
});
}
else{
console.log("Notification permission is: ${Notification.permission}`);
}
The result of this code is Notification permission is: denied meaning that else statement was executed but permission is given as if permission was already requested and denied was the answer of the request.
Can someone explain why does this happen?

I figured out that the problem was comming from loading the website with no TLS https, making some features in chrome to be disabled by design..
I was unabled to figure this out sooner because the host testing i was using was being accessed with 0.0.0.0 instead of localhost which is the one that chrome whitelists for features

Related

How to redirect site's port only when changing site more **details in topic**

So I want to be able to redirect site's port only since I'm running the website as 3 different types of IPS. So on WebServer hosting device I've edited the host file 127.0.0.1 to q. So on host device I can access my website as q:8080. On internal devices I can access it as 192.168.43.1:8080 and I've port forwarded version.I have DNS and changed the external port. So other people can access my site by entering http://ladasno.hopto.org:8080. So the reason I'm asking this because I pretty lack knowledge yet. So I want for each address to be redirected from 8080 to 9090 (For Internal ports) and from 80 to 90 for external ports. So what should I do.
So I've tried like looking for a way to read website's url user is accessing from (FAILED TO FIND). Then I've tried to like to make window.location.replace("urls") 4 times at once. Then I used .. since I thought it will autofind the part that has left of the url
So first I just tried:
function redirect() {
window.location.replace("http://q:9090/Page/Index.html");
window.location.replace("http://192.168.43.1:9090/Page/Index.html");
window.location.replace("http://ladasno.hopto.org:9090/Page/Index.html");
}
This has failed since redirects to last URL I've provided. Then I've tried:
function redirect() {
window.location.replace("..:9090/Page/Index.html");
}
And this just shows error in console:
Uncaught DOMException: Failed to execute 'replace' on 'Location': '..:9090/Page/Index.html' is not a valid URL.
at redirect (http://192.168.43.1:8080/:5:21)
at HTMLButtonElement.onclick (http://192.168.43.1:8080/:10:31)
Please HELP ME!
So I have high expectations for stackoverflow community members. And I don't think I can describe actual results because I haven't seen any details.

Javascript: Querying clipboard permissions on Firefox does not work

I'm trying to modify the content of the clipboard by executing the "copy" command on a focused DOM element. However, the new content comes from the server, and arrives from a websocket, which is then processed in a callback that does not come from direct user interaction.
Because it wasn't triggered by the user, it is not allowed to do such thing as modifying the clipboard content, as specified in the Firefox's MDM website . The error message is:
document.execCommand(‘cut’/‘copy’) was denied because it was not
called from inside a short running user-generated event handler.
To overcome this issue, the same page suggest to request permissions to the browser throught navigator.permissions.query():
navigator.permissions.query({name: "clipboard-write"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
/* write to the clipboard now */
}
});
However, thought the article they use different names for the permissions:
clipboard-write
clipboard-read
clipboardWrite
clipboardRead
Within the same site, the permissions article shows a browser compatibility table , where it says Firefox supports clipboardWrite from version 51 and clipboardRead from version 54.
The problem is that none of these permissions is working on Firefox (I'm using Firefox 63). The query callback is never called. I have tried the four permission names without any luck.
To make sure the mechanism was working, I tested other permissions, such as notifications which worked flawlessly (It showed "prompt")
navigator.permissions.query({name: "notifications"}).then(result => {
alert(result.state)
});
So my question is: Am I doing something wrong when requesting the permissions, or have this permissions changed whatsoever?
It is intentional, aka. by design in Firefox. They chose to not expose this API to WEB content, only for browser extensions.
See here and more specifically here for your reference:
We do not intend to expose the ability to read from the clipboard (the Clipboard.read and Clipboard.readText APIs) to the web at this time. These APIs will only be usable by extensions...

Why does my site cert become insecure after a JQuery AJAX call?

I've got a website that uses JQuery to grab information from an API located at: https://api.lootbox.eu/. The website I'm making has a cert that's been created and installed with Let's Encrypts tools. (I followed a tutorial on DigitalOcean to set it up)
Now, when I click a button to make the API call and update the website contents, Google Chrome then deems the cert "Not Secure" (shown in the address bar).
Here's my code.
//when the page has fully loaded
$(document).ready(function(){
function parseResponse(data)
{
//parsing JSON...
//lets avoid the "data.data"
response = data.data;
//set the user's general profile details
$("#user_avatar").attr("src", response.avatar);
$("#comp_rank_img").attr("src", response.competitive.rank_img);
$("#comp_rank").html(response.competitive.rank);
$("#qp_level").html(response.level);
$("#qp_playtime").html(response.playtime.quick);
$("#comp_playtime").html(response.playtime.competitive);
$("#qp_wins").html(response.games.quick.wins);
$("#comp_total_games").html(response.games.competitive.played);
$("#comp_wins").html(response.games.competitive.wins);
$("#comp_losses").html(response.games.competitive.lost);
}
//goes to the Overwatch API and grabs the JSON data for processing.
function processAjax()
{
$.ajax({
url: "https://api.lootbox.eu/pc/us/JuicyBidet-1292/profile"
}).then( function(response){
parseResponse(response);
});
}
//set up the button event listener
$("#submit").click(function(e){
//prevent the button from reloading the page
e.preventDefault();
//run the ajax grabber/processor
processAjax();
});
});
(I need to learn how to format code properly in SO questions...).
I don't get any other errors in my Chrome console (other than "favicon" 404ing - which is unrelated).
I've also tried the website in Microsoft Edge and I get the following in their Console:
SCRIPT7002: XMLHttpRequest: Network Error 0x800c0019, Security certificate required to access this resource is invalid.
I'm thinking either the problem is with my code, or now that I've checked, the API website's cert is invalid in both Chrome and Edge.
Any help would be appreciated. Thanks.
(I'm aware the code is scrappy, I'm learning)
I get this warning "This server could not prove that it is api.lootbox.eu; its security certificate expired 6 days ago"
This could happen because of one among following reasons.
1.Certificate is not issued by the third party site.
2.The third party site certificate is not updated.
3.The third party and browser connection is not secure.
The insecure error is because if a site is loaded over https the browser expects all subsequent calls made by the page will be secure, but in your case you are calling a URL http://api.lootbox.eu/pc/us/JuicyBidet-1292/profile which uses http:// and is insecure thus making your website insecure.
Solution
Use https url's everywhere in your pages.

Getting Geolocation KCLError Domain error

I am working on a site that uses HTML5 Geolocation.
Here is code I am using:
html:
<button onclick="getLocation()">Try It</button>
js
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log('Geolocation is not supported by this browser.');
}
}
function showPosition(position) {
console.log(position.coords);
alert(position.coords.latitude);
alert(position.coords.longitude);
}
Everything seem to works well, but some users are getting KCLError Domain error. Here are their comments:
This happens regardless of browser - Safari and Chrome both affected(tablet);
Presumably the error occurred internally and isn't displayed on the screen;
When a user presses 'button' it shows the error and fails.
I did not found any solution or reasons related to HTML about this error.
Everything seem to works fine, but some users get KCLError Domain error
I'm guessing it might be a device related bug than of an app.
From my point of view your code is pretty much "standard" when it comes to
consuming the API.
Ask one of users,that can catch this error, to testing the same feature on this site
Try checking their wi-fi settings or whether or not they have their wi-fi turned on. For more details, checkout this OS.
Update from OP:
So the KCLError Domain error error was not retated to html5 geolocation code but to users GSM triangulation, reverse IP geolocation or WiFi network database lookups.
I was confused by this error because it was not self explanatory and here is where I made a mistake, this error is not strict error code it just additional error message and the error code was error.POSITION_UNAVAILABLE and this code is well known.
UPDATE FROM CUSTOMER:
I upgraded the OS on my iPad today and location services have started working again. So all good now
The KCLError Domain error error was not related to the HTML5 geolocation code, but to users doing GSM triangulation, reverse IP geolocation or WiFi network database lookups.
I was confused by this error because it was not self explanatory and here is where I made a mistake. This error is not a strict error code, it is just an additional error message. The error code was error.POSITION_UNAVAILABLE and this error code is well known.
As for everything seemingly working fine, but some users getting KCLError Domain error:
I'm guessing it might be more a device related bug than of an app. From my point of view your code is pretty much "standard" when it comes to consume the API.
Ask one of users,that can catch this error, to test the same feature on that site. Try checking their wi-fi settings or whether or not they have their wi-fi turned on. For more details, check out their OS type and version.
UPDATE FROM CUSTOMER:
I upgraded the OS on my iPad today and location services have started working again. So all good now

Permission denied to access property 'CKEDITOR'

I have integrated CKEditor and CKFinder in my sites. All worked well. But now on one of my sites there is a problem. Firebug shows:
Error: Permission denied to access property 'CKEDITOR'
I use the next code for integration:
CKFinder.setupCKEditor( null, 'ckfinder/' );
$( 'textarea.tarea_ckeditor' ).ckeditor();
What can be the problem here?
Follow the steps bellow:
Check the URL from the browser (maybe you are on the dev website) :D
Check, if the files and your page is on the same domain (they should be).
Do you make any redirects on the server (append www or even on another domain)?

Categories