ng-src not working with basic authorization

Question

I've created a small web application in AngularJS that is using basic authorization. For this purpose I have added following line in to app.js:

app.js

.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
    $httpProvider.defaults.headers.common['Accept'] = 'application/json';
    $httpProvider.defaults.headers.common['Authorization'] = "Basic am9obkBqb2huLmNvbTpibGE=";
}]);

On server side I'm using Spring MVC to display the file:

ImageResourceController.java

@Controller
@RequestMapping("/common/image")
public class ImageResourceController {
    @Autowired
    private FileService fileService;

    /***************************************************
    * URL: /api/common/image/{id}
    * Method: GET
    * get(): gets an image according to it's uuid from the db
    * @param id : String id (UUID)
    * @return ByteArray containing image
    ****************************************************/
    @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] get(@PathVariable("id") String id) throws IOException {
        FileMeta fileMeta = fileService.loadFile(id);

        return IOUtils.toByteArray(fileMeta.getInputStream());
    }
}

FileService.java

/**
 * File Service Layer takes care about the file operations to the database.
 * <p>
 */
@Service
public class FileService {
    @Autowired
    GridFsOperations gridOperation;

    /***************************************************
     * Loads a file with metadata from GridFS.
     * <p>
     * @param uuid : String uuid
     * @return fileMeta : FileMeta fileMeta
     ****************************************************/
    public FileMeta loadFile(String uuid) {
        FileMeta fileMeta = new FileMeta();

        try {
            GridFSDBFile gridFile = gridOperation.findOne(new Query(Criteria.where("metadata.UUID").is(uuid)));
            fileMeta.setMetaData(gridFile.getMetaData().toMap());
            fileMeta.setInputStream(gridFile.getInputStream());
        } catch (Exception e) {
            fileMeta = null;
            e.printStackTrace();
        }

        return fileMeta;
    }
}

FileMeta.java

/**
* FileMeta is used to transfer a file with metadata.
*
*/
public class FileMeta {
    private Map<String, Object> metaData;
    private InputStream inputStream;

    public Map<String, Object> getMetaData() {
        return metaData;
    }

    public void setMetaData(Map<String, Object> metaData) {
       this.metaData = metaData;
    }

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
}

spring-security.xml (intercept-url pattern="/api/** applies)

<!-- Define security patterns to allow/disallow access -->
<http pattern="/favicon.ico*" security="none" />
<http pattern="/resources/**" security="none" />
<http use-expressions="true" create-session="stateless" auto-config='true' entry-point-ref="restAuthenticationEntryPoint">
    <intercept-url pattern="/api/**" access="hasRole('ROLE_USER')"/>
    <http-basic/>
</http>

Authorization is working for every call I do with $http and $resource. But when I want to load my image from the database with img ng-src (I'm using the MongoDB File Store), then the Authorization header isn't parsed to the server and login fails.

<img ng-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/><br/>

Can somebody tell me how I can send the Authorization header also with img ng-src?

I'm using AngularJS 1.2.0.

Thanks for your help.

Answer 1

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.

In your example it would be: <img http-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/>

But you can also make it dynamic with <img http-src="/api/common/image/{{imageId}}"/> for example.

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';