angularjs - Add HTTP Header in JavaScript to requests for images - Stack Overflow

admin管理员组

文章数量:1200963

I have a JS/HTML5 Project based on angularjs where I protect the api with an authorization token set in the http header. Now I also want to protect the access to images from the server.

I know how to do it on the server side, but how can I add HTTP Headers to image requests in angular or javascript? For api request we have already added it to the services ($ressource) and it works.

I have a JS/HTML5 Project based on angularjs where I protect the api with an authorization token set in the http header. Now I also want to protect the access to images from the server.

I know how to do it on the server side, but how can I add HTTP Headers to image requests in angular or javascript? For api request we have already added it to the services ($ressource) and it works.

• javascript
• angularjs

Share Improve this question Follow asked Feb 17, 2014 at 23:31 bernhardhbernhardh 3,3091111 gold badges4545 silver badges7979 bronze badges 4

• 5 Do you mean implicit HTTP requests from <img> tags? I don't think that's possible (well other than cookies). – Pointy Commented Feb 17, 2014 at 23:35
• Your answer is the only valid one :( – bernhardh Commented Feb 20, 2014 at 12:07
• Pointy, what exactly do you mean by "other than cookies"? I'm coding an HTML-based mobile app. I can store the session cookie in the local storage and retrieve it again in Javascript, but how could I attach it to the http call from the <img> tag? – Joe7 Commented Jul 23, 2015 at 9:46
• @Joe7 Pointy is right, when using cookies, all requests made are sent within your cookies you don't have to atach it to your request, because it is aready atached. And leftjustified is right, it's the only valid answer. – lenilsondc Commented Nov 8, 2016 at 15:03

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 4

In Angular 1.2.X

There are more than a few ways to do this. In Angular 1.2, I recommend using an http interceptor to "scrub" outgoing requests and add headers.

// An interceptor is just a service.
app.factory('myInterceptor', function($q) {
  return {
    // intercept the requests on the way out.
    request: function(config) {
      var myDomain = "http://whatever.com";

      // (optional) if the request is heading to your target domain,
      // THEN add your header, otherwise leave it alone.
      if(config.url.indexOf(myDomain) !== -1) {

        // add the Authorization header (or custom header) here
        config.headers.Authorization = "Token 12309123019238";
      }

      return config;
    }
  }
});

app.config(function($httpProvider) {
  // wire up the interceptor by name in configuration
  $httpProvider.interceptors.push('myInterceptor');
});

In Angular 1.0.X

If you're using Angular 1.0.X, you'll need to set the headers more globally in the common headers... $http.defaults.headers.common.Authentication

EDIT: For things coming from

For this you'll need to create a directive, and it's probably going to get weird.

You'll need to:

1. Create a directive that is either on your <img/> tag, or creates it.
2. Have that directive use $http service to request the image (thus leveraging the above http interceptor). For this you're going to have to examine the extension and set the proper content-type header, something like: $http({ url: 'images/foo.jpg', headers: { 'content-type': 'image/jpeg' }).then(...)
3. When you get the response, you'll have to take the raw base64 data and set the src attribute of your image element to a data src like so: <img src="data:image/jpeg;base64,9hsjadf9ha9s8dfh...asdfasfd"/>.

... so that'll get crazy.

If you can make it so your server doesn't secure the images you're better off.

As said here you can use angular-img-http-src (bower install --save angular-img-http-src if you use Bower).

If you look at the code, it uses URL.createObjectURL and URL.revokeObjectURL which are still draft on 19 April 2016. So look if your browser supports it.

In order to use it, declare 'angular.img' as a dependency to your app module (angular.module('myapp', [..., 'angular.img'])), and then in your HTML you can use http-src attribute for <img> tag.

For example: <img http-src="{{myDynamicImageUrl}}">

Of course, this implies that you have declared an interceptor using $httpProvider.interceptors.push to add your custom header or that you've set statically your header for every requests using $http.defaults.headers.common.MyHeader = 'some value';

we have the same issue and solve it using a custom ng-src directive ..

basically a secure-src directive which does exactly what ng-src does (its a copy basically) BUT it extends the url with a query parameter which includes the local authentication header.

The server code returning the resources are updated to not only check the header but also the query parameters. of course the token added to the query parameter might be authenticated slightly differently.. e.g. there might be a time window after after a normal rest request in which such a request is allowed etc .. since the url will remain in the browser history.

From oficial documentation at: http://docs.angularjs.org/api/ngResource/service/$resource

Usage

$resource(url, [paramDefaults], [actions]);

[...]

actions: Hash with declaration of custom action that should extend the default set of resource actions. The declaration should be created in the format of $http.config:

{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...}, ...}

More about $http service:

http://docs.angularjs.org/api/ng/service/$http#usage_parameters

As pointed out Here FIrefox supports httpChannel.setRequestHeader :

// adds "X-Hello: World" header to the request
httpChannel.setRequestHeader("X-Hello", "World", false);

In the example code above we have a variable named httpChannel which points to an object implementing nsIHttpChannel. (This variable could have been named anything though.)

The setRequestHeader method takes 3 parameters. The first parameter is the name of the HTTP request header. The second parameter is the value of the HTTP request header. And for now, just ignore the third parameter, and just always make it false.

However this seems to be only available on Firefox (link)

You can either use Cookies to pass the value and retrieve it as a cookie instead of a HttpHeader or use ajax to retrieve the image with a custom header.

More links :

• link1
• link2

本文标签： angularjsAdd HTTP Header in JavaScript to requests for imagesStack Overflow