3

let's assume that there is a website under HTTPS, in that WebSite the user can set the IP of a local machine (thermal printer in this case). How can the user print something on that printer by using the website from his device?

The user have to use the WebSite only under the local network where the thermal printer is to be able to print.

The printer has a http server in it which it uses for the communication.

At this point how can a HTTPS website send a HTTP request to that local thermal printer?

NiceToMytyuk
  • 3,644
  • 3
  • 39
  • 100
  • Where you able to solve this problem? I am facing the same issue – user1928596 Oct 10 '21 at 01:47
  • 1
    @user1928596 solved it in two ways, the first was to make an "extention" which opened a http page from the HTTPS page and that page based on url params was sending the data to the HTTP webserver, but it worked only on chrome, so i decided to prevent the user from printing from the website, and i made an IONIC app for Android, iOS and Windows from which i was able to do HTTP requests without any problems – NiceToMytyuk Oct 11 '21 at 06:55
  • I might create a chrome extension, thanks for confirming there is no clean way – user1928596 Oct 12 '21 at 15:11

1 Answers1

1

Assuming you want this to be a variable that any user inputs,and that any user on any network has the ability to access their own printer, you would need it to be executed on the frontend. This way each user will be able to access the printer on their own network.

That gives you basically one option. Javascript. So if you wanted a stored request with some variables, you could have the javascript store variable from the DOM and then post a fetch request https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Here is an example function

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

You are likely struggling because of CORS. You can find in depth discussion here https://javascript.info/fetch-crossorigin

In short, you will need to modify the fetch headers to have the correct credentials, mode, etc. as seen in the comments in the above snippet.

Brandon Kauffman
  • 1,515
  • 1
  • 7
  • 33
  • 1
    That's what i was going to do, the issue is that the WebSite from which the JavaScript will be executed is in HTTPS while the data of the printer to which i have to POST is in HTTP – NiceToMytyuk Apr 07 '21 at 12:27